element-ui vue表单验证踩坑

1.要验证输入只能为数字时

{type:'number',message:'只能为数字'}。。必须要在v-model后面加上.number。。即v-moder.number

但是这里的验证会将你输入的value格式化为number值，在你做自定义校验的时候，要格外注意，很有可能你的正则表达式没有起到效果，就是因为它自动给你转化格式了。。。

 

2.附加element-ui + vue 自定义表单校验方法

data() {
    var newReg1 = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error("不能为负数"));
      } else {
        callback();  //必须要有回调，要不然表单无法提交
      }
    };
   var newReg2 = (rule, value, callback) => {
      let pattrn = /^((?!0)\d+(\.\d{1,2})?)$/g
      if (!pattrn.test(value)) {
        callback(new Error("不能为负数"));
      } else {
        callback();
      }
    };
    return {
      amountCheck: [
        { validator: newReg1, trigger: "blur" },
        { validator: newReg2, trigger: "blur" },
	//此处可写多个校验方法
	......
      ]
    };
}

3.今天又遇到一个坑，在做表单验证时<el-form-item>必须添加prop属性，而且prop的名字必须和input框v-model绑定的值一致。否则的话，表单验证就会出错。