iview的InputNumber组件有值的情况下校验失败

于 2024-09-14 15:09:44 发布
阅读量276 收藏
点赞数 3
分类专栏： vue组件 文章标签： iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45016440/article/details/142259097
版权

        iveiw表单在使用InputNumber组件的时候设置必填校验，输入框中有值却提示校验失败

        这时候，我们可以在rules规则中添加类型属性type，即可正确触发校验。

number: { required: true, type: "number", message: "请输入数值", trigger: "change" }

入门级前端开发
关注
专栏目录
解决 iView Select 选中后验证失败的问题
qq_41524691的博客
07-15 1312
问题描述：使用iView的Select组件配合Form进行验证的时候，总是验证不通过 看了网上的建议，添加type: 'number’还是不起作用，查看iView的验证规则文档后发现 iView rules文档 即如果我们不添加type来限定类型，则默认类型就是 string，但是一般的需求是Option的value都是id这种唯一标识。 所以有可能会出现number/string，之前拿到后台的数据时，id默认是string，然后不添加type，只是常规的required、message、trigge
iview表单校验，输入框有值校验失败
weixin_39818813的博客
11-30 3245
问题 当做表单校验时，输入框回显了后端返回的值，但是点击确认按钮时，却校验失败，提示当前项不能为空。 分析： 由于后端返回的是number类型，而其前端却使用的是普通输入框，所以导致类型不匹配。普通输入框即使我们输入的是数字，打印出来的值也会是字符串，这就说明了，普通输入框不可能会输出数字，但是回显是又是数字，好了，类型不匹配，验证自然不通过。 解决 让类似保持一致，可以把普通输入框改成数字输入框，并确保后台返回的类似也是数字。 也可以继续使用普通输入框，然后在获取后台对应的值的时候，将number转换为
ivew-design 的 Input 组件如何限制只让他输入数字（错误的话回退到 oldValue）
左不言的博客
11-08 319
解决问题：当用户输入其他字符的时候自动回退到 oldValue <template> <Input placeholder="用户Id" search enter-button v-model="userId" /> </template> <script> export default { data() { return { userId: '' } }, watch: { userId(newVa.
ivew 的 InputNumber 框控制只能输入
Teemo_shape的博客
06-16 515
通过formatter格式化数字，以展示具有具体含义的数据，往往需要配合parser一起使用。 <InputNumber :step="1" :formatter="value =>`$ ${value}`.replace(/^(0+)|[^\d]+/g, '')" :parser="value => value.replace(/^(0+)|[^\d]+/g, '')" ...
iview inputNumber 输入框有值但是校验失败
weixin_39818813的博客
12-09 2814
表单校验的时候，输入输入的数字，但是表格依然校验失败。原因：校验的时候，是先执行校验的回调函数，再执行修改赋值。 可以通过打印验证是否是这种情况： 很明显，获取修改后值的方法111111打印在后，校验逻辑2222打印在前。 <template> <Form ref="form" inline :model="form" :label-width="120" :rules="rules"> <FormItem label="汇款金额" prop="money
iview-InputNumber-表单验证
qq_43033251的博客
08-10 983
iview-InputNumber-表单验证
IviewUI form校验number类型有值却提示无效问题
weixin_49032614的博客
11-16 1221
在跟后端对接接口的过程里少不了表单校验的东西，除了string类型外当然也有number数字类型的，但是当我使用number类型的下拉框时，明明选中打印是这个字段是有值的，但是却还是校验失败提醒。我当时以为是个BUG，于是解决办法是先用字符串，提交再转成number类型，但是这样明显麻烦了很多，直到后来————我在IviewUI的文档里查到了rules规则里面有个校验类型的。在校验规则中加入type: "number"即可解决问题。
IVIEW 组件库Input的type为number时maxlength失效的问题
Layrs的博客
07-05 1255
iview组件库Input的type为number时maxlength失效问题解决
iview校验表单----必填选项失败
xuan的博客
04-24 4455
1.问题：设置的是必填，明明有数据却总是显示校验错误。 原因：用iview自带的表单验证时，一直验证不通过，因为iview默认校验数据类型为String，而的表单是其他数据类型所以一直验证不通过。 解决：添加校验的对应数据类型即可。如我的数据类型是数组则设置为 type:'array'（数组类型） 其他的有：type:'number' （数字类型） type: 'data'（日期类型...
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 6108
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
iview 的InputNumber数值组件，tabs组件高度
qq_25103439的博客
05-07 3655
表单验证 password: [ {required: true, message: '密码不能为空', trigger: 'blur'}, {validator: validateNewPwd, trigger: 'blur'} ], tabs高度问题：确定动画就可以高度根据内容自适应了 <Tabs value="jcbb" :animated="false"&g...
[vue][iView]基于iView的async-validator在表单项[input]中自定义验证number无效的解决方法
身披白袍的博客
03-03 2996
按照iView的设计，对于数字的输入和获取应该使用的组件是InputNumber而不是Input type='number'。解决方法是使用`transform`函数。
iview Input 输入一个字符就主动失焦问题的解决
qq_43778935的博客
07-22 1564
问题： 今天在使用iview组件库中的Input时,为组件设置了on-blur事件，但是发现每输入一个字符就会失焦触发on-blur事件，导致输入不断触发验证。 解决如下： <FormItem v-for="(inputItem,index) in nodeData.inputs" :key="index" :label-width="10"> <span v-if="!editInputName[index]">{{inputItem.name}}&
解决iView中InpuNuber限定小数位时，输入光标经常后移的问题
Sophie_U的博客
11-13 3613
问题场景： InputNumber组件在设置precision精度后，每次输入都会自动填充导致光标后移，影响输入体验。 &lt;InputNumber :precision="2" :min="0.01" style="width:100%" v-model="value"/&gt; 期待效果： 如输入1.22就直接输入而不是出现输入1，变为1.00的情况。 原因： 在iView的In...
iview表单验证不生效问题注意点
weixin_34101784的博客
03-14 1163
按照iview官网介绍写的form表单验证，但是无论填写与否都不进行校验，找了很久的原因，突然才发现一个关键的地方，一定要加props!!! https://blog.csdn.net/xuaner8786/article/details/80008925 这是网友总结的iview表单验证注意点，我在这里再补充 props一定要加这一点！否则表单验证不生效。 转载于:https://www.c...
关于iview表单验证select标签在使用v-for的时候验证一直不通过的问题
Autism、陌亡
11-13 9661
困扰了我几天的问题，iview进行表单验证select标签时候验证失败的问题
iview form校验input输入框number类型
weixin_60991607的博客
12-13 3537
总结一下input数字校验 1、speedLimit: [ { required: true, message: '请输入。。。', trigger: 'blur' }, { validator: isPositiveNum, trigger: 'blur' } ], 加上trigger，没有设置type，默认是string，数据类型没法通过校验 2、speedLimit: [ { required: true, messag...
iview 表单日期有值校验失败
weixin_39818813的博客
07-28 695
表单校验失败可能情况 1. 双向绑定使用的是:value 解决：将:value改成v-model <!-- 通关期限 --> <FormItem label="企业通关期限" prop="tannetCompanyDTO.copEndDate"> <DatePicker type="date" format="yyyy-MM-dd" //:value="form.tannetCompanyDTO.cop
iview Radio组件她的值不能回填
最新发布
06-10
如果你使用 iview 的 Radio 组件，它的值确实不能回填。这是因为 iview 的 Radio 组件使用的是受控组件（controlled component），也就是说，它的值是由 `value` 属性控制的。如果你尝试手动修改 `input` 元素的值，它不会改变 `value` 属性的值，从而导致无法回填。 如果你需要让 Radio 组件的值回填，你可以尝试使用非受控组件（uncontrolled component）来实现。以下是一个示例： ```html <template> <div> <RadioGroup ref="radioGroup" v-model="selectedValue"> <Radio v-for="option in options" :key="option.value" :label="option.value">{{option.label}}</Radio> </RadioGroup> <Button @click="setSelectedValue">回填选中值</Button> </div> </template> <script> import { RadioGroup, Radio, Button } from 'view-design'; export default { components: { RadioGroup, Radio, Button, }, data() { return { options: [ { label: '选项1', value: 1, }, { label: '选项2', value: 2, }, { label: '选项3', value: 3, }, ], selectedValue: undefined, }; }, methods: { setSelectedValue() { const radioGroup = this.$refs.radioGroup; const selectedValue = radioGroup.$children.find((radio) => radio.checked).value; this.selectedValue = selectedValue; }, }, }; </script> ``` 在这个示例中，我们使用了非受控的 Radio 组件。在数据中，我们定义了选项数组和选中的值。在模板中，我们使用 `v-for` 来渲染选项，并使用 `selectedValue` 来绑定选中的值。在 `setSelectedValue` 方法中，我们获取了选中的值，并将其赋值给 `selectedValue`，从而实现了回填选中值的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值