技术栈背景：
vue2.6.11，view-design4.7.0
默认都是绑定在ruleValidate字段上
使用方法一
直接在绑定的ruleValidate上写校验规则，如
ruleValidate: { userName: [ { required: true, message: '角色名称不能为空', trigger: "blur", }, ], phoneNumber: [ { required: true, pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: "请填写正确的手机号", trigger: "blur", }, ], },
使用方法二
直接在绑定的ruleValidate上写校验规则，但是validator使用自定义的，提取出来，在data中定义
代码如下：
点击查看代码
data() {
const moneyValidate = async (rule, value, callback) => {
if (value === "" || value === undefined) {
return callback(new Error("xxxx不能为空"));
}
if (!numberOneToMore.reg.test(value)) {
return callback(new Error(numberOneToMore.text));
}
return true;
};
const receiptTimeLimitValidate = async (rule, value, callback) => {
if (value === "" || value === undefined) {
return callback(new Error("xxxx不能为空"));
}
if (!numberTwoNoZero.reg.test(value)) {
return callback(new Error(numberTwoNoZero.text));
}
return true;
};
const receiptValidate = async (rule, value, callback) => {
if (!this.formValidate.receiptStart || !this.formValidate.receiptEnd) {
return callback(new Error("请选择xx起止日期"));
}
};
return {
inputIouShow: true,
id: [],
formValidate: {},
ruleValidate: {
receiptLoanNum: [
{
required: true,
message: "借据编号不能为空",
trigger: "blur",
},
],
receiptAmount: [
{
required: true,
validator: moneyValidate,
trigger: "blur",
},
],
benIntRate: [
{
required: true,
message: "xxxx不能为空",
trigger: "blur",
},
],
anIntRate: [
{
required: true,
message: "xxx不能为空",
trigger: "blur",
},
],
receiptTimeLimit: [
{
required: true,
validator: receiptTimeLimitValidate,
trigger: "blur",
},
],
receiptStart: [
{
required: true,
validator: receiptValidate,
trigger: "change",
},
],
},
};
},
其中numberOneToMore,numberTwoNoZero为自己自定义的校验规则，
而const receiptValidate = async (rule, value, callback) => { if (!this.formValidate.receiptStart || !this.formValidate.receiptEnd) { return callback(new Error("请选择xx起止日期")); } };这块代码可以校验两个字段是否有值，可自行修改代码。
如
使用方法三
可以将校验写在独立的js文件中，然后在vue文件中引入
这个js文件中可以写具体的校验规则
在具体的vue文件中引入
