Element-UI表单验证

校验规则

dataRule: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '字符在2到6个之间' }
        ],
        identityCard: [
          { required: true, message: '身份证不能为空', trigger: 'blur' },
          { pattern: /\d{17}[\d|x]|\d{15}/, message: '身份证格式错误' }
        ],
        gender: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { type: 'number', message: '只能输入数字' }
        ],
        phone: [
          { pattern: /0?(13|14|15|18)[0-9]{9}/, message: '手机号格式不正确' }
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '城市不能为空', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '区/县不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ]
      }

表单通过rules属性绑定校验规则对象，表单项通过prop属性绑定具体校验规则

注意校验的字段必须和表单项绑定的字段名称必须一致，否则校验不生效

<el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-form-item label="姓名"
                    prop="name">
        <el-input v-model="dataForm.name"
                  :disabled="disabled"
                  placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证"
                    prop="identityCard">
        <el-input v-model="dataForm.identityCard"
                  :disabled="disabled"
                  placeholder="身份证"></el-input>
      </el-form-item>
      <el-form-item label="性别"
                    prop="gender">
        <el-dict v-model="dataForm.gender"
                 code="SEX"
                 :disabled="disabled"
                 placeholder="性别"></el-dict>
      </el-form-item>
      <el-form-item label="年龄"
                    prop="age">
        <el-input v-model.number="dataForm.age"
                  :disabled="disabled"
                  placeholder="年龄"></el-input>
      </el-form-item>
      <el-form-item label="手机号"
                    prop="phone">
        <el-input v-model="dataForm.phone"
                  :disabled="disabled"
                  placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="省份"
                    prop="province">
        <el-input v-model="dataForm.province"
                  :disabled="disabled"
                  placeholder="省份"></el-input>
      </el-form-item>
      <el-form-item label="城市"
                    prop="city">
        <el-input v-model="dataForm.city"
                  :disabled="disabled"
                  placeholder="城市"></el-input>
      </el-form-item>
      <el-form-item label="区/县"
                    prop="area">
        <el-input v-model="dataForm.area"
                  :disabled="disabled"
                  placeholder="区/县"></el-input>
      </el-form-item>
      <el-form-item label="详细地址"
                    prop="address">
        <el-input v-model="dataForm.address"
                  :disabled="disabled"
                  placeholder="详细地址"></el-input>
      </el-form-item>
    </el-form>