ElementUI|ElementUI 表单自定义验证规则 ElementUI表单自定义验证规则

【ElementUI|ElementUI 表单自定义验证规则】需要验证熟悉程度，验证条件有
*必须填入
*必须为数字
*范围为 0 -100
参考 ElementUI 的官方文档，可以有这样的验证规则，验证第一个条件：

rules: { acquaintance: [{ required: true, message: '请输入熟悉程度', trigger: 'blur' }] }

官方文档给出了这样一个验证数字的例子,并有这样的一段说明：

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
按照说明，增加了 .number 修饰符：

并添加了第二条规则：

rules: { acquaintance: [{ required: true, message: '请输入熟悉程度', trigger: 'blur' }, { type: 'number', message: '熟悉程度必须为数字', trigger: 'blur' }] }

最后，我写了一个自定义验证，用来验证第三个规则。
完整验证如下：

const validateAcquaintance = (rule, value, callback) => { // 输入 8--，value 为 8 // 估计这里内部使用了 parseInt() / parseFloat() if (value < 0 || value > 100) { callback(new Error('熟悉程度在 0 至 100 %之间')) } else { callback() } }rules: { acquaintance: [{ required: true, message: '请输入熟悉程度', trigger: 'blur' }, { type: 'number', message: '熟悉程度必须为数字', trigger: 'blur' }, { validator: validateAcquaintance, // 自定义验证 trigger: 'blur' }] }

然而，并没有满足条件！！！这是官方文档的例子！！！
8-- 通过了验证！！！

问题在于这个 .number 修饰符，会自动转换为数字。这样数据可以得到正确的 8 ，程序具有良好的容错性，但是不具备用户友好性，因为输入 8– 并不会提示用户输入错误。
所以，我这里的解决办法是，放弃使用 .number，而使用自定义验证，将数据（字符串）手动转为数字，再判断。所以我的自定义验证函数变成了：

const validateAcquaintance = (rule, value, callback) => { if (!value) { callback(new Error('必须输入熟悉程度')) } value = https://www.it610.com/article/Number(value) if (typeof value ==='number' && !isNaN(value)) { if (value < 0 || value > 100) { callback(new Error('熟悉程度在 0 至 100 %之间')) } else { callback() } } else { callback(new Error('熟悉程度必须为数字')) } }