其实说起来这也不算是一个坑,只能说因为number校验比较特殊。
今天做表单验证需要做一个验证:判断输入的必须是金额(数字),而且不能为空。
于是毫不犹豫的我这样写的:
<FormItem label="Money" prop="money">
<Input v-model="formValidate.money" placeholder="Enter your money"></Input>
</FormItem>
// 表单验证规则
ruleValidate: {
money: [
{ required: true, message: 'The number cannot be empty', trigger: 'blur' },
{ message: 'Error number', trigger: 'blur', type: 'number' }
]
}
// 输入绑定
formValidate: {
money: 0
}
第一条规则:必须输入;
第二条规则:输入内容必须为数字;
验证一下第一条:
嗯,看来是对的!
验证一下第二条:
不是我们预想的结果,不管输入什么第二条都验证不通过,why?
因为input值默认是string,因此v-model加上修饰符.number,将输入内容转换为数字:
<FormItem label="Money" prop="money">
<Input v-model.number="formValidate.money" placeholder="Enter your money"></Input>
</FormItem>
测试一下第二条规则:
what??!为什么第一条规则反而不通过了!!
看来第一条规则也应该加上 type: 'number',加上之后效果如下:
这时就会发现第二条规则永远不会用上,当输入非数字的时候校验的还是第一条规则,然而“empty”并不是我想要的提示,因此后面考虑了一个折中的规则:
// 表单验证规则
ruleValidate: {
money: [
{ required: true, type: 'number', message: 'Please input correct number!',
trigger: 'blur' }
]
}
此外,采用v-model.number获取数字在输入 '78237dsfhuisdf',这种前面是数字后面是字符串的情况,会截取前面的数字,导致表单校验成功,这也不是我们期待的结果,这应该算是 v-model.number的一个bug吗?