前言
在vue2表单校验：el-form表单绑定数组并使用rules进行校验_vue2 rules校验-CSDN博客中，使用form原生的rules对表单中每个控件的必填、格式等做了校验。但是保存时，除了验证每一个控件的输入合乎要求外，还需要验证控件之间的数据合规性，针对这个案例，就是其中的人员是否重复（本文代码接上文）。
需求
- 需要用户填写一系列人员，不设上限，但是至少填写一个。
- 每个人员信息包含人员名称和电话号码
- 希望页面“人员”前面添加必填项标识
- 希望检查人员姓名和手机号码是否填写，格式是否符合规范，并给出合理提示
- 所添加的人员不能重复，即姓名和手机号不能都相同。
解决方案
要验证人员是否重复，可以一边输入一遍检查，也可以在保存的时候一次性检查。我选择在保存时检查。
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
}
],
