您可能不会遇到同样的问题，甚至根本不会使用博主所说的技术，但是却获得了解决一类问题的思路与方法。

最近忙于新内容的学习与工作开发，有一段时间没更新文章了，最近在开发使用：View UI，在使用Input组件时，发现了无论如何，表单验证规则总存在问题：输入框无论输入值，还是没有值，验证总是不通过。

1.原代码

<Form ref="createOrEditForm"
            label-position="top"
            :rules="createOrEditRule"
            :model="house">
    <!--omit some code-->
    <FormItem :label="L('楼层') + '：'"
              prop="floorNo">
        <Input type="number"
               v-model="house.floorNo" />
    </FormItem>
</Form>

createOrEditRule = {
    floorNo: [
        {
            required: true,
            message: this.L('请输入楼层', undefined, this.L('楼层')),
            trigger: 'blur',
        },
    ],
}

2.调整

由于我们的数据类型是number，所以在校验规则增加数据类型。

createOrEditRule = {
    floorNo: [
        {
            required: true,
            type:'number',
            message: this.L('请输入楼层', undefined, this.L('楼层')),
            trigger: 'blur',
        },
    ],
}

但是每次文本框有值，依然会提示。

image-20210317145259668

3.还存在问题

在新增时，在输入后，点击保存，问题依然存在，博主去往表单组件的查看源码，没发现什么端倪。

4.解决问题

通过调试工具发现，取到的value是string

image-20210317155014181

问题已经很清晰了，取值为string，而验证规则中的type是number，所以会返回错误，怎么解决呢？

4.1 修饰符

v-model.number将用户输入的字符串转换成number

<Input type="number"
       v-model.number="house.floorNo" />

image-20210317163006236

4.2 添加属性(property)

<Input type="number"
       number
       v-model="house.floorNo" />

4.3 溯源

博主在组件的源码中发现了类型转换的代码：

if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);

所以说是给子组件赋予了 number属性(property)。

至于v-model.number，据博主调试实测，此时子组件内部的this.number=false，所以与上一节根据属性this.number的值做类型转换走的路子是不一样的，那可能需要去研究下vue源码以窥探这个修饰符的实现原理，但是我们的问题总算得以解决了。