el-input验证规则

首先在html结构中的代码

<el-form-item prop="nums"> //此处验证规则名称要与 v-model 一致
    <el-input v-model="nums"> </el-input>
<el-form-item>

然后在data中定义验证规则

data() {
    //   这个验证规则适用为 : 不为空,可以为0,只能是数字,且有范围,如果有其他需求可以自己修改添加
     var rules_nums = (rules, value, callback) => {
          if(!value && value !==0) {
               callback(new Error("不能为空"))
           } 
           if(value === 0) {
               callback()  //这里是值可以为0
           }
            if(Object.is(value, NaN)) {
                callback(new Error("这里必须是数字,可以为负值"))
            } else {
                 if (value > 180 || value < -180) {
                      callback(new Error("这里是范围限制"))
                 } else {
                       callback()
                 }
            }
      }
     return {
         rules:{ // 这个rules是在表单外部定义的规则名称
            nums:[{validator: rules_nums, trigger: blur}]   //  红色为验证规则的名称
         }
     }        
}
      

elementUI官网导航: https://element.eleme.cn/#/zh-CN/component/form

posted @ 2020-09-11 10:31  _曾经沧海难为水  阅读(1518)  评论(0编辑  收藏  举报