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

最近忙于新内容的学习与工作开发,有一段时间没更新文章了,最近在开发使用: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.解决问题

通过调试工具发现,取到的valuestring

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源码以窥探这个修饰符的实现原理,但是我们的问题总算得以解决了。