elementUI校验注意事项(不定期更新)

1. 数字校验

1.1 elementUI官方提供的数字校验:  elementUI的数字校验和其他校验不同, 使用了Vue 自身提供的用于将绑定值转化为 number 类型的修饰符.

步骤两步:

1) el-form-item中填写prop

2)v-model后面添加".number"   (这一步比较特别)

3) 在rules定义:{ type: 'number', message: '佣金单价必须为数字值'}

在form表单中使用:


         
 


在data中定义的rules:
rules:{
        'sample':[{ type: 'number', message: '这里必须填写数字值'}] ,
      },

以上这种校验方式, 在输入"1a1"的时候不会提示输入错误, 传到后台的内容会自动忽略字符'a', 获取到'11'的结果. 且该值是必填项

1.2 我实际中使用的是自定义校验判断输入内容是否是数字

html部分:

        
           
        


js部分
data(){
    var isNumber = (rule, value, callback)=>{
      if(value != ""){
        if((/^[+-]{0,1}(\d+)$|^[+-]{0,1}(\d+\.\d+)$/).test(value) == false){
            callback(new Error("请填写数字"));
        }else{
            callback();
        }
      }else{
        callback();
      }
    }
    return{
      ruleForm:{
        amount:0,
      }
      rules:{
        amount:[{ validator: isNumber}] ,
      }
}    

需要注意的是这里在v-model后没有加".number", 这样就不会自动把输入的内容中非数字字符忽略掉了.

正则表达式允许的范围是带0个或者一个正负号的整数或者小数