Element-ui⾃定义表单验证规则
有时在后台我们需要对输⼊的数值进⾏简单的正则验证，此时ElementUi ⾃带的验证已不能满⾜我们的需求，故需要我们⾃⼰去写验证规则有两种书写位置:
⼀种在data中写规则
另⼀种在methods中写规则
表单:
<el-form-item label="需求砍价⼈数：" prop="haggleNumber">
<el-input v-model="formData.haggleNumber" clearable>
</el-input>
</el-form-item>
⽅法⼀: 在data中写规则
data() {
// ⾃定义校验规则
var bargainMoney = (rule, value, callback) => {
// rule 对应使⽤bargainMoney⾃定义验证的对象
// value 对应使⽤bargainMoney⾃定义验证的数值
// callback 回调函数
邓超金鸡奖const r = /^\+?[1-9][0-9]*$/; // 正整数
if (value == null || String(value).trim() === "") {
callback(new Error("不能为空"));
} el if (!r.test(value)) {
callback(new Error("请输⼊正整数"));
}el {
callback();
}
};
快乐花园 return {
formData: {
表格怎么做haggleNumber: "", // 砍价⼈数
},
rules: {
haggleNumber: [
{
required: true,
validator: bargainMoney,
trigger: "blur"
}
],
}
蜂蜜保存 }
}
⽅法⼆: 在methods中写规则
家和data() {
return {财务基础知识入门
formData: {
haggleNumber: "", // 砍价⼈数
},
rules: {
haggleNumber: [
{
required: true,
validator: this.bargainMoney,
trigger: "blur"
}
],
}
}
},
methods: {
// ⾃定义校验规则
自考英语专业bargainMoney(rule, value, callback){
// rule 对应使⽤bargainMoney⾃定义验证的对象
// value 对应使⽤bargainMoney⾃定义验证的数值
// callback 回调函数
const r = /^\+?[1-9][0-9]*$/; // 正整数
if (value == null || String(value).trim() === "") {
return callback(new Error("不能为空"));
} el if (!r.test(value)) {
return callback(new Error("请输⼊正整数"));
}el {
return callback();
}
},
水晶功效}
⼆者的区别在于:
在data 中不需要通过 return 回调函数,⽽在 methods 中则需要
在methods中写的验证规则 ，需要在rules中配置规则时通过 this获取
分享⼀刻:
国内数⼀数⼆的代码托管平台,⼀起来为国内开源⽣态贡献⼀份⼒量吧
