【Vue】View UI(原iView)Input数字类型的验证问题

DDGarfield

发布于 2022-06-23 17:58:10

1.2K0

发布于 2022-06-23 17:58:10

文章被收录于专栏：加菲的博客加菲的博客

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

最近忙于新内容的学习与工作开发，有一段时间没更新文章了，最近在开发使用：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',
        },
    ],
}

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

3.还存在问题

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

4.解决问题

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

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

4.1 修饰符

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

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

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，所以最终走的路子是不一样的，那可能需要去研究下vue源码以窥探这个修饰符的实现原理，但是我们的问题总算得以解决。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-03-17，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自加菲的博客微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度