本文主要是介绍vue2表单校验：添加自定义el-form表单校验规则，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
在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}],这篇关于vue2表单校验：添加自定义el-form表单校验规则的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
