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}],