關於elementui表單數字校驗踩坑記

需求：一、輸入類型是數字。二、數字大小有限制。三、非必填

作法：

<el-form-item label="熟悉程度" prop="averageCaseRunTime">
　　<el-input v-model.number="updatehobby.averageCaseRunTime" placeholder="0">
　　　　<template slot="append">%</template>
　　</el-input>
</el-form-item>

rules: {
　　averageCaseRunTime: [{
　　　　type: 'number',
　　　　trigger: 'blur',
　　　　required: false,
　　　　message: '平均用例運行時長必須爲數字值',
　　　　transform (value) { // 用於解決數字非必填函數。若是沒有該函數，該字段會在表單提交時候進行觸發（造成必填字段）
　　　　　　return _.toNumber(value)
　　　　}
　　}，

　   { validator: validateAcquaintance, // 自定義驗證 trigger: 'blur' }

　　]
}

const validateAcquaintance = (rule, value, callback) => {
　　if (value < 10 || value > 100) {
　　　　callback(new Error('熟悉程度在 0 至 100 %之間'))
　　} else {
　　　　callback()
　　}
}

！！！問題： 當輸入框未輸入任何數字，點擊提交時候，會默認在該輸入框填充0，即致使驗證不經過

解決： 不指定輸入的數據類型，使用自定義校驗對輸入的字段進行轉整型再進行有關數字範圍的校驗。（下面的截圖是根據後端返回的信息動態生成的前端校驗規則）