Element-UI 中使用rules验证

第一种：写在data中进行验证

• ：代表这是一个表单
• -> ref：表单被引用时的名称，标识
• -> rules：表单验证规则
• -> model：表单数据对象
• -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
• -> ：表单中的每一项子元素
• -> label：标签文本
• -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
• ：输入框
• -> v-model：绑定的表单数据对象属性
• -> style：行内样式
• -> maxlength：最大字符长度限制

1.Template代码

<template>
  <div class="">
    <el-form
      :model="editvalue"
      :rules="editRules"
      ref="schoolEdit"
      label-width="150px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="editvalue.name"
              placeholder="请输入姓名"
              maxlength="10"
              clearable
            >el-input>
          el-form-item>
        el-col>
      el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身份证号：" prop="idCardNumber">
            <el-input
              v-model="editvalue.idCardNumber"
              clearable
              maxlength="18"
              placeholder="请输入身份证号"
            >el-input>
          el-form-item>
        el-col>
      el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="入职日期：" prop="contractEntryDate">
            <el-date-picker
              style="width: calc(100% - 20px)"
              v-model="editvalue.contractEntryDate"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择入职日期"
            >
            el-date-picker>
          el-form-item>
        el-col>
      el-row>
    el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t("common.cancel") }}el-button>
      <el-button type="primary" @click="Submit">{{
        $t("common.save")
      }}el-button>
    div>
  div>
template>

2.Script代码