vue2表单校验：添加自定义el-form表单校验规则

前言

在vue2表单校验：el-form表单绑定数组并使用rules进行校验_vue2 rules校验-CSDN博客中，使用form原生的rules对表单中每个控件的必填、格式等做了校验。但是保存时，除了验证每一个控件的输入合乎要求外，还需要验证控件之间的数据合规性，针对这个案例，就是其中的人员是否重复（本文代码接上文）。

需求

1. 需要用户填写一系列人员，不设上限，但是至少填写一个。
2. 每个人员信息包含人员名称和电话号码
3. 希望页面“人员”前面添加必填项标识
4. 希望检查人员姓名和手机号码是否填写，格式是否符合规范，并给出合理提示
5. 所添加的人员不能重复，即姓名和手机号不能都相同。

解决方案

要验证人员是否重复，可以一边输入一遍检查，也可以在保存的时候一次性检查。我选择在保存时检查。

1、在数组校验信息中，添加自定义的校验方法

其中的自定义函数checkPeople，来自定义检查规则。

rules:{
            people:[
              {                
                validator: (rule, value, callback)=>{
                  this.checkPeople(rule, value, callback)  //自定义校验方法
                },
                //message: '请添加人员',
                trigger: 'blur',
                required: true
              }
            ],
}

2、methods中自定义检查函数

checkPeople(rule, values, callback){            
            //自定义验证的逻辑
            if(!values || values === undefined || values === null || values.length === 0){
              return callback(new Error(`请添加人员`));
            }else{
              //判断重复项
              for (let i = 0; i < this.frm.people.length; i++) {
                for (let j = 0; j < i; j++) {
                  if (this.frm.people[j].nickName === this.frm.people[i].nickName &&
                    this.frm.people[j].phonenumber === this.frm.people[i].phonenumber) {                    
                    return callback(new Error(`第 ${i + 1} 项人员"${this.frm.people[i].nickName}"重复添加`));
                  }
                }
              }
              return callback()
            }
          }

3、保存时，如往常一样使用validate

onSave(){
  this.$refs.frm.validate(valid => {
  if (valid) {                
      //校验通过，这里写保存逻辑
   }
  });            
},

总结

如果默认检查项无法满足需要，可以自定义validator方法，在rules中定义即可。其中，rules中不写message字段，将使用自定义validator函数中的error msg，否则，rules中的message将覆盖自定义方法中的msg：

people:[
        {            
            validator: (rule, value, callback)=>{
              this.checkPeople(rule, value, callback)
            }, 
            message: '我是rules中的msg，将覆盖checkPeople返回的error msg',           
            trigger: 'blur',
            required: true
        }
    ],