ele表单验证的数字的坑

ele支持表单验证，对于数字的验证，是这样的

<el-form :rules="addRules" ref="addTemp" :model="addTemp" >
    <el-form-item label="里程:" prop="mileageStart">
        <el-input v-model.number="addTemp.mileageStart" placeholder="请输入里程范围最小值">
        </el-input>
    </el-form-item>
</el-form>
复制代码

addRules: {
    mileageStart: [
        {type: 'number', message: '必须为数字值', trigger: 'blur'}
    ]
}
复制代码

坑一 要注意数字的验证须要写v-model.number，才会起做用
坑二 出现的问题是，能够输入数字开头的任意字符串（好比1dede）, 因而我加了个 type="number"，也就是

<el-input type="number" v-model.number="addTemp.mileageStart" placeholder="请输入里程范围最小值">
</el-input>
复制代码

这就不能输入非数字，可是e能够，他会转化成3个0,这不用管了。
可是产品才不会让你这么轻松，好比须要保留小数点后2位。那就用自定义的表单验证吧。

<el-form :rules="addRules" ref="addTemp" :model="addTemp" >
    <el-form-item label="里程:" prop="mileageStart">
        <el-input v-model.number="addTemp.mileageStart" placeholder="请输入里程范围最小值">
        </el-input>
    </el-form-item>
</el-form>
复制代码

// 保留2位小数的验证
var checkNumber = (rule, value, callback) => {
    var num2 = /^([1-9][\d]{0,}|0)(\.\d{1,2})?$/
    value = '' + value
    if (isNaN(value) || !(num2.test(value))) {
        callback(new Error('请输入数字, 保留2位小数'));
    } else {
        callback();
    }
}
addRules: {
    mileageStart: [
        {validator: checkNumber, trigger: 'blur'}
    ]
}
复制代码

这里的num2在console上能够测试，
坑三 须要num2.test(字符串)才会有效果，
num2.test(数字)的反应很奇怪，不能正常进行验证
由于一开始验证4.这个数字是经过的，因而我就加了value = '' + value，转化成了字符串，仍是验证经过，
按照这个正则表达式不该该经过呀
坑四 我就打印这个value，发现输入的4.到这里会变成4，那就是v-model.number和type="number"干的好事了，由于都用正则验证了，这里的number天然是不须要了，就去掉，而后这才ok