Vue常规表单校验规则与自定义表单校验

在Vue中因为新增属性所以表单校验不用像以往需要在各种 if 或 swith 判断，在form标签中通过 :rules 属性绑定 data 中定义的表单校验规则来进行加载，然后给各个 input 标签添加 prop 属性来绑定不同的表单校验规则名称来进行不同的规则校验

表单校验规则，以登陆举例：

1. 在 form 表单中绑定一个校验规则，并且在data中声明

2. data 中定义所需的校验规则，此处表单规则的名称需要与form标签上绑定的和属性名要一致

注：此处校验规则为对象，利用对象的属性名绑定在prop上才能使不同输入框收到不同规则约束

代码解释：

 // 手机号的具体校验规则
        mobile: [
          {
           //required 是否必传，属性值为布尔值 即true/false
            required: true,
            //触发校验规则的提示信息
            message: '请输入手机号，此信息必须填写',
            //校验触发的类型，blur为输入完成后，输入框失焦时（推荐使用）
            trigger: 'blur'
          },
          {
           //正则校验属性
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ],

3. 在input 或 饿了么UI中的 el-form-item上绑定prop属性，并且属性值为字符串，与表单校验规则中的属性名一致（各个规则数组 / 对象名）

自定义表单校验：

自定义表单校验就是在data中声明一个函数，并将这个函数的校验规则添加到上述的校验规则中

注： 自定义校验规则时需要写在data中,但是需要写在 return 之前

代码注释：

//身份证校验
person: [
          { required: true, message: '必填', trigger: 'blur' },
          {
          //validator  自定义表单属性
          //validateIdNo  自定义校验规则名称，名称可以自定义但是一定要与data中命名的函数同名
            validator: validateIdNo,
              //trigger 建议每次验证对象中都添加一次，保证代码的健壮性
            trigger: 'blur'
          }
        ]

自定义校验模板：

 const validateIdNo = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
          callback(new Error('警示信息'))
        } 
      }

当自定义属性需求过多且需要复用时，建议分拆自定义校验模块，即新建一个文件夹，文件夹内部建立 j s 文件，内部填充所需要的自定义校验规则，然后按需导出，在需要的模块中按需导入即可