解决 iView Select 选中后验证失败的问题

最新推荐文章于 2023-12-12 10:50:00 发布
最新推荐文章于 2023-12-12 10:50:00 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： vue iview 文章标签： vue.js iView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41524691/article/details/107357094
版权
问题描述：使用iView的Select组件配合Form进行验证的时候，总是验证不通过看了网上的建议，添加type: 'number’还是不起作用，查看iView的验证规则文档后发现iView rules文档即如果我们不添加type来限定类型，则默认类型就是 string，但是一般的需求是Option的value都是id这种唯一标识。所以有可能会出现number/string，之前拿到后台的数据时，id默认是string，然后不添加type，只是常规的required、message、trigge
摘要由CSDN通过智能技术生成

问题描述：使用iView的Select组件配合Form进行验证的时候，总是验证不通过
在这里插入图片描述
看了网上的建议，添加type: 'number’还是不起作用，查看iView的验证规则文档后发现
iView rules文档

在这里插入图片描述
即如果我们不添加type来限定类型，则默认类型就是 string，但是一般的需求是Option的value都是id这种唯一标识。
所以有可能会出现number/string，之前拿到后台的数据时，id默认是string，然后不添加type，只是常规的required、message、trigger，结果是验证不通过
然后试着吧id 使用Number进行转换 ，然后添加type: ‘number’ ，还是不行！！！

但是文档中还出现了transform这么一块

最低0.47元/天 解锁文章
不胜世间青睐
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
完美解决iview 的select下拉框选项错位的问题
08-27
完美解决iview 的select下拉框选项错位的问题 在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的...
关于elementUI中select表单加验证规则，已选择有值但还是提示验证的问题
QINGYUMARY的博客
02-27 5585
转载：两点注意，完美解决 https://blog.csdn.net/a631373000/article/details/91488499
Vue2 el-cascader 表单校验明明选择了参数但是不触发rules
Youyzq的博客
03-23 1729
Vue2 el-cascader 表单校验明明选择了参数但是不触发rules
antd vue select无法通过表单rule校验问题
WKJYC的博客
10-22 387
首先在没有数据新建全部正常，从某条数据编辑手动回填select值后出现 即使重新选择了select还是一直爆红未选择。确保prop正确情况下，依然出现了这个事。
el-select点击选择后仍有rules提示问题
Giraffe0615的博客
06-11 1771
el-select点击选择后仍有rules提示问题
解决el-select的表单校验输入框有值但校验未通过的问题
a870604723的博客
07-14 798
必须写:model="表单名称" ，否则校验拿不到数据，一直校验undefined，导致选项只要产生变动就提示对应的rules。
iview同时验证多个表单问题总结
12-29
iview验证一个表单问题： 在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。 <Form ref=addAreaForm :model=addAreaForm :...
浅谈关于iview表单验证的问题
10-17
主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目 treeselect校验不生效
最新发布
SM_Cute的博客
12-12 501
vue项目 treeselect校验不生效
iview组件form表单的验证报错问题解决
lyz246859的博客
02-28 900
uniapp iview
关于element 表单验证select组件中的rule未生效问题
camille009的博客
08-25 2399
明明添加了rule缺不生效 解决方法： 特别提醒，中prop=“selectedService”的值一定要跟对应的v-model=“ruleForm.selectedService”一致，即两个“selectedService”得一样，否则会导致rules失效
Vue + iview select 表单校验明明有值，却提示没值
qq_36291747的博客
06-30 3982
1. 问题说明 在使用 iview 中的 select 表单项时，绑定必填校验规则后，遇到了这个神奇的问题：明显选中了值，打印出来也有值 – 一个整型的 id 值；但是，表单始终提示没有选择值！这是什么骚操作？表单部分截图如下： 2. 解决办法 查看 iview 官方组件使用文档，没有找到问题端倪… google 一下，找到了可行的解决办法： 将 select 表单项绑定的值改为字符串类型 :value="item.value+''" ： <FormItem label="基地名" prop="ta
【VUE学习笔记】Select标签中Value属性取值,写数字却变成字符串的解决方法
DayHeart的博客
03-29 1911
1.给value属性添加绑定 v-bind:value="1" 此时的1会被当作js表达式,而不是双引号所包裹的字符串 2.给select标签的v-model增加.number v-model.number 此时select标签收集的数值都会强制转换成字符串
使用iview的select组件配合Form表单验证时，验证不通过
漏网之鱼
07-01 1529
一、问题重现 如上图，实际上已经选择了，但是还是有校验不通过的错误提示 二、问题分析 首先了解一下iview的校验库规定的校验规则，如下图： 从上面的规则中可以看出，如果我们不添加type来限定类型，则默认类型就是 string，但是一般的需求是option的value都是类似于id这种唯一标识，所以有可能会出现number/string。可恶的是有时候我们即使指定了type: ‘string’，依然校验不过，接着看文档说明，文档中还针对校验字段转换的做了说明，就是针对transform属性的说明，如
vue 验证是否数字类型_【Vue】iview的select回显数据，number类型验证不了
weixin_32637935的博客
02-22 510
https://run.iviewui.com/Kkuaz9G0自己看吧。上数据—> 取消 —-> 上数据结果，select那个不会验证通过。{{item.name}}上数据cancelexport default {data () {return {device:{type: {id: null}},datas: [{id:65,name: 'type1'},{id:66,name:...
Vue+iview表单验证失效
qq_45222558的博客
04-24 2937
iview表单验证的步骤： 第一步：给 Form 设置属性 rules :rules 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=" " 第三步：注意：Form标签里面是 :model 第四步：注意：在Form标签里面必须添加 ref,这个作用相当于id,在此范围内的表单验证有效 第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。 <Form ref="formValidate
vue iview的select下拉框选中后校验不失效
weixin_52063946的博客
07-22 2445
下拉框已经选中了某一项，但是校验依然存在。
ElementUI @change更改select 表单验证失效的解决办法
crabfrog的博客
11-03 4465
ElementUI @change更改select 表单验证失效的解决办法 起因是这样的，表单有一处，两个Select 选择器是上下级的关系，于是我想到了使用Cascader 级联选择器，来避免先选后选的问题。但是这里的选项 是分成两个数组的 提交时也是两个字段。用v-model肯定是不行了。只好用@change来绑定值。 HTML <el-form-item label="申请项目" prop="applyProject"> <el-cascader
Iview Select Form表单校验 Vue2项目 踩过的坑
zerlinda0913的博客
05-31 246
官方文档写得不详细，开发项目的时候在select中踩了好多坑， 业务需求，需要拿option循环数组3个值，这时候怎么办，只看到官网提供绑定的label与value，只有两个值，我还要拿个值怎么办？绑定一个tag 业务需求在一个数组中每个元素对象的下拉列表要变化，怎么把v-for循环遍历的东西传进去，并且拿到on-select事件中绑定的值了？ 这样就可以 然后select数据回显的问题，v-model的值绑定的是option中绑定的value值 ......
iview select下拉框错位
09-04
1. CSS样式问题：iview select组件使用了一些CSS样式来控制下拉框的位置，如果其他自定义的CSS样式与之冲突，可能会导致下拉框错位。可以通过检查页面中的CSS样式，特别是与select相关的样式，来解决该问题。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值