标签：this 需求 formdata erro 而在 inpu item targe callback
有时在后台我们需要对输入的数值进行简单的正则验证,此时ElementUi 自带的验证已不能满足我们的需求,故需要我们自己去写 验证规则
有两种书写位置:
表单:
<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("不能为空")); } else if (!r.test(value)) { callback(new Error("请输入正整数")); }else { callback(); } };
}
方法二: 在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("不能为空")); } else if (!r.test(value)) { return callback(new Error("请输入正整数")); }else { return callback(); } }, }
二者的区别在于:
分享一刻:
国内数一数二的代码托管平台,一起来为国内开源生态贡献一份力量吧
标签：this 需求 formdata erro 而在 inpu item targe callback
原文地址：https://www.cnblogs.com/huangaiya/p/12874675.html
