Vue自定义表单验证(rule，value，callback)使用详解
作者：-風过无痕
这篇文章主要介绍了Vue自定义表单验证(rule，value，callback)使用详解,今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用，需要的朋友可以参考下
前言
- 最近在实际开发中遇到需要验证合同编号是否在数据库已经存在，自定义表单验证。
- 的表单验证大家都知道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）详细使用 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。
到此这篇关于Vue自定义表单验证(rule，value，callback)使用详解的文章就介绍到这了,更多相关vue自定义表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！