当前位置：首页 > news >正文

Vue-自定义表单验证（rule，value，callback）详细使用

news 2025/8/29 3:53:52

前言

最近在实际开发中遇到需要验证合同编号是否在数据库已经存在，自定义表单验证。
的表单验证大家都知道form绑定rules，prop绑定值与form.值一样，必填，失去焦点触发提示信息。
今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用
当我们明白了 validator3个参数意思，我们就可以随机组合我们自己的验证规则了

自定义验证规则

prop绑定值: [{validator: (rule, value, callback) => {console.log('验证规则信息',rule);console.log('输入框的值',rule);// callback()为空通过验证// callback(new Error('未通过验证，抛出异常'))console.log('是否通过验证规则',callback);},// 失去焦点触发trigger: "blur",},],

使用场景-正则验证是否是手机号

test()方法：用于检测字符串中指定的值，匹配成功返回true，匹配失败返回false

prop绑定值: [{ validator:  (rule, value, callback) {// 手机号正则表达式const reg = /^[1][3,4,5,7,8][0-9]{9}$/if (value == '' || value == undefined || value == null) {callback()} else {// 正则失败false，取反true抛出异常if (!reg.test(value) && value != '') {// 抛出异常，验证规则有错callback(new Error('请输入正确的电话号码'))} else {callback()}}// 输入框值变化一次执行一次}, trigger: "change" },],

使用场景-判断合同编号是否重复

prop绑定值: [{ required: true, message: "请输入合同编号", trigger: "blur" },{validator: async (rule, value, callback) => {// 发请求const res = await adrepetition(value);console.log("合同编号", res// 判断状态码if (res.code == 200) {callback();} else {callback(new Error("合同编号重复，请重新输入"));}},trigger: "blur",},],

使用场景-多选判断是否选中

checkListmain是data里面数据，是多选v-model绑定的值，是一个数组

prop绑定值: [{ required: true, message: "请输入合同编号", trigger: "blur" },{validator: async (rule, value, callback) => {// 发请求const res = await adrepetition(value);console.log("合同编号", res// 判断状态码if (res.code == 200) {callback();} else {callback(new Error("合同编号重复，请重新输入"));}},trigger: "blur",},],

总结：

经过这一趟流程下来相信你也对 Vue-自定义表单验证（rule，value，callback）详细使用有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！