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

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

表单校验规则,以登陆举例:

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

Vue常规表单校验规则与自定义表单校验_第1张图片

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

Vue常规表单校验规则与自定义表单校验_第2张图片

注:此处校验规则为对象,利用对象的属性名绑定在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属性,并且属性值为字符串,与表单校验规则中的属性名一致(各个规则数组 / 对象名)

Vue常规表单校验规则与自定义表单校验_第3张图片

自定义表单校验:

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

Vue常规表单校验规则与自定义表单校验_第4张图片

注: 自定义校验规则时需要写在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 文件,内部填充所需要的自定义校验规则,然后按需导出,在需要的模块中按需导入即可

你可能感兴趣的:(vue.js,前端,javascript)