iview表单验证number的一个坑（async-validator）

其实说起来这也不算是一个坑，只能说因为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吗？