foreword
-
Recently, in actual development, it is necessary to verify whether the contract number already exists in the database, and to customize the form verification.
-
Everyone knows that the form is bound to rules, and the prop binding value is the same as the form. value, which is required, and the prompt message will be triggered when the focus is lost.
-
Today we will talk about the specific usage scenarios of custom validation rules and the meaning and use of its three parameters
-
When we understand the meaning of validator's three parameters, we can randomly combine our own validation rules
custom validation rules
prop绑定值: [
{
validator: (rule, value, callback) => {
console.log('验证规则信息',rule);
console.log('输入框的值',rule);
// callback()为空通过验证
// callback(new Error('未通过验证，抛出异常'))
console.log('是否通过验证规则',callback);
},
// 失去焦点触发
trigger: "blur",
},
],Usage scenario - regular verification is a mobile phone number
test() method: used to detect the value specified in the string, return true if the match is successful, and return false if the match fails
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" },
],Usage scenario - determine whether the contract number is repeated
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",
},
],Use scenario - multiple selection to determine whether to select
checkListmain is the data in data, which is the value bound by multi-choice v-model, and is an array
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",
},
],Summarize:
After this process, I believe you have a preliminary deep impression on the detailed use of Vue-custom form validation (rule, value, callback), but the situation we encounter in actual development is definitely different, so we To understand its principle, everything changes. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen