el-form表单验证，表单项v-if切换显示，校验错误信息未清除

最新推荐文章于 2024-07-01 00:01:25 发布
最新推荐文章于 2024-07-01 00:01:25 发布
阅读量438 收藏
点赞数 1
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35666211/article/details/134166089
版权

表单v-if 切换

例如：企业承担费率是根据前面个人材料金额的值进行v-if动态显示,
当在个人材料金额是实发金额状态时，有错误提示，不清空，切换个人材料金额为开票金额，这时候没有企业承担费率表单项，却仍然显示企业承担费率校验错误提示。

在这里插入图片描述

在这里插入图片描述

解决方法： form-item 添加key

在这里插入图片描述

qq_35666211
关注
Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题
鸭绒的博客
04-10 3212
说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。 示例代码： <template> <el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验
weixin_43286206的博客
08-26 5697
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验 当我们使用element-ui的el-form时，想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 9385
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
el-form 表单校验，根据下拉内容 v-if 动态展示字段，校验不清空/不重置问题
Shimeng_1989的博客
03-27 1848
问题：v-if切换前，如果有校验错误提示，则v-if切换后，不清空，仍旧会显示切换前的校验错误信息。场景：会根据”供应商分类“的选择，动态展示不同的填写内容。
解决el-form动态表单切换导致的校验bug
努力努力再努力的博客
09-07 1326
问题描述 ： 在平常项目需求中，常常有el-form表单需要根据条件切换el-form-item的情况发生，这时候容易切换过多导致校验错误定义。解决方式: 在v-if做判断的时候，加上key。类似于这种情况，切换之后 校验还在。
使用el-form自定义校验的同时使用v-if/v-show引起的校验问题
最新发布
下雨打伞干嘛的博客
07-01 614
使用el-form自定义校验的同时使用v-if/v-show引起的校验问题
vue+antd表单已输入内容但校验一直不消失问题总结
。
05-29 1627
值得注意的是，如果你的表单是在弹框里，在弹框打开的方法中是否对form进行了重新赋值，如果用等于号赋值可能会导致form缺少字段，正确做法是用对象合并的方法。使用antd表单校验规则经常出现已经填写内容了但校验提示一直存在的情况，以下是我遇到并问题总结的解决方法，希望能帮到你们。5、在表单校验规则中，输入框、文本框的触发方式最好使用blur，日期选择器、普通选择器使用change。4、确认form绑定的model是否已初始化各个字段（最常见但容易忽略的情况）3、确认form绑定的model。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之
vue el-form 遇上 v-if，表单校验不生效问题
且听风吟的博客
08-18 8496
el-form遇上v-if，表单校验不生效问题
vue使用Element组件时v-for循环里的表单项验证方法
08-27
正常情况下，我们可以按照官方文档添加规则，需要验证的表单项设置 prop，然后提交表单时通过 form 的 validate 方法验证表单项。 但是，如果表单项里有通过 v-for 动态生成的表单项，如何设置验证规则就变得复杂了...
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3770
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
vue el-form 添加 v-if之后，表单校验不生效问题
gp_911014的博客
05-19 2891
用 element中 的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；但是发现用 v-if 控制的表单元素总是无法被校验。用 v-show 来控制的表单元素在隐藏状态下时，表单也会校验这个字段。【1】使用 v-if：element在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。
elementUI el-form表单校验不消失 强制去掉校验
m0_64491262的博客
02-10 4358
尝试变更form中字段的默认类型,修改rules的change或者blur,都没用.最后选择给form绑定change事件,有值时取消校验.直接点击提交或保存,弹出校验信息('请输入xxxxxx')在输入框中输入信息后,校验信息无法自动消失。
element-ui表单使用v-if进行触发后，表单校验错乱的问题
Heartnottowake的博客
04-28 962
表单有多个元素需要校验，但是其中某些元素是根据另一个元素的值去用v-if控制显示与隐藏,切换值得时候，就会出现校验错乱。解决方法: 给表单的el-form-item去绑定一个key,这样每次刷新验证，就会找对应的key去校验，这是唯一的。
element组件库表单数据的校验回显以及再次打开校验信息还显示（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
04-12 821
element组件库表单数据的校验回显在关闭之后没有重置并且再次打开表单之后还显示校验信息。
el-form动态表单切换导致的校验bug（v-if、v-show导致校验失效的bug）
新前端小白的博客
01-20 9839
使用v-if还是v-show 使用el-form来做表单验证时，有时候选择的条件不同，展示的el-form-item也不一样， 这时候就需要控制输入框的展示与隐藏。那么，用v-if还是v-show呢？ v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要频繁的切换，使用v-show，否则，使用v-if。 表单验证bug 当使用v-if或v-show来控制el-f...
element-ui表单校验，使用v-if进行切换显示，表单校验错乱
我是小鹏呀的博客
01-30 1100
问题：在el-form表单校验中，有些表单项是通过v-if控制显示与隐藏，在切换的时候就会出现校验错乱的情况。解决方法：在v-if控制显示的表单项上增加key属性。
el-form 表单的循环+v-if
josiecici的博客
04-26 620
表单的循环 <el-form label-width="180px" :model="handleAddForm1" class="handleForm" v-if="six_Target"> <template v-for="(value,key,index) in handleForm1"> <el-form-item :label="value+':'" :key="index" :prop="key">
el-form组件如何清除校验提示（前端技能提升）
2201_75705263的博客
10-26 3187
el-form组件如何清除校验提示
el-form 表单校验 不要在el-form-item下显示
03-21
el-form 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 el-form 中进行表单校验时，可以通过设置 rules 属性来定义校验规则。每个表单项（el-form-item）可以设置 prop ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值