Element-ui 自定义表单验证规则

Posted 2020-12-17 huangaiya

 

有时在后台我们需要对输入的数值进行简单的正则验证,此时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("不能为空"));
      } else if (!r.test(value)) {
        callback(new Error("请输入正整数"));
      }else {
        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("不能为空"));
      } else if (!r.test(value)) {
        return callback(new Error("请输入正整数"));
      }else {
        return callback();
      }
    },
}

 

二者的区别在于:

• 在data 中不需要通过 return 回调函数,而在 methods 中则需要
• 在methods中写的验证规则 ,需要在rules中配置规则时通过 this获取

 

分享一刻:

　　国内数一数二的代码托管平台,一起来为国内开源生态贡献一份力量吧 

　　Gitee