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