解决el-form动态表单切换导致的校验bug

最新推荐文章于 2024-06-19 13:22:36 发布
最新推荐文章于 2024-06-19 13:22:36 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： vue 文章标签： bug javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45494634/article/details/126748515
版权

解决el-form动态表单切换导致的校验bug

问题描述 ： 在平常项目需求中，常常有el-form表单需要根据条件切换el-form-item的情况发生，这时候容易切换过多导致校验错误定义。
类似于这种情况，切换之后 校验还在
在这里插入图片描述
解决方式: 在v-if做判断的时候，加上key

<el-form-item prop="name" label="名称" v-if="条件" key="name">
<el-input>...</el-input>
</el-form-item>
没有天赋全靠手打
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
weixin_39849153的博客
12-19 903
前言开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的在线访问:动态表单校验github(欢迎star): https://github.com/Mrblackant. ..思考几个问题1.整个表单是可新增的，所以要遍历生成；2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则)...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate
weixin_44867717的博客
06-01 4728
radio的使用
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
最新发布
2401_84437604的博客
06-19 500
自定义校验规则的时候，必须保证各个分支且至少有一个分支执行callback()函数，否则会导致表单校验操作validate阻塞而无返回结果。apiUrl: [callback(new Error(`请输入接口URL`));callback(new Error('http:// 或 https:// 开头',),} else {callback();},## 算法1. 冒泡排序2. 选择排序3. 快速排序4. 二叉树查找: 最大值、最小值、固定值5. 二叉树遍历。
el-form动态表单切换显示/隐藏导致的校验报错
monkey7
12-27 2248
el-form 的el-select change事件 控制el-card里包裹的 el-tab-pane 表单 显示/隐藏
element中el-form表单提交，根据不同的条件会有不同的rulus校验
qq_43631129的博客
06-30 1308
两种校验字段不同
【VUE的Form表单】使用v-if切换控件时，表单校验不生效
weixin_55846296的博客
09-29 3325
【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效
elementUI Form表单 表单项v-if切换时校验结果还显示
岳公子
06-22 736
加个key值即可。 <el-form-item label="活动内容" v-else prop="content" key="1" > <el-input type="textarea" v-model="ruleForm.content"></el-input> </el-form-item>
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
解决vue中el-tab-pane切换的问题
10-15
首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是由于组件没有正确地重置或销毁导致的。为了解决这个问题，我们可以采用以下策略： 1. **给每个`el-tab-...
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-form动态表单切换导致的校验bug（v-if、v-show导致校验失效的bug）
新前端小白的博客
01-20 9470
使用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...
vue el-form 自定义动态rules 出现英文校验提示
ssnnyyjj的博客
11-22 1227
vue框架使用el-form需要自定义rules，自定义的rules会出现英文校验提示
表单校验之根据不同的选项校验不同的表单项
zuo_zuo_blog的博客
10-25 1562
方法1：参考 方法2：当点击切换按钮时引发一个change事件 <el-form-item label="阈值分类" prop="kind"> <el-radio-group v-model="form.kind" @change="agreeChange"> <el-radio label="单阈值统计"></...
el-form自定义表单项的校验错误信息
Vienn_tu的博客
12-29 1916
动态表单根据后端获取的类型生成若干表单项，表单的内容传到后台进行校验，如果有错误信息则显示在相应的表单项下。 查了很久无果，大部分是和自定义验证规则有关的，于是又重新看el-form属性，果不其然有一个表单项的属性用来显示错误信息（之前可能眼瞎了）。 接下来的事就很简单了，绑定一个对象类型的data值到动态表单项的error属性，后端获取到了错误信息直接赋值就好。 示例如下： <el-form-item :label="item.name" :prop="item.key" :error="erro
解决vue3中使用个别form表单校验失灵
m0_61135864的博客
07-06 1264
注意的是 如果要对reactive重新赋值 会丢失原来响应式对象的引用地址 变成一个新的引用地址 这个新的引用地址指向的对象是没有经过 reactive 方法处理的 可以选择包裹一个对象。也可以使用 Object.assign(from, res.data) 来进行处理。当我把form通过ref或者reactive定义在外面的时候 表单校验就可以成功了。
解决vue两个表单切换时,校验规则失效问题
weixin_44111864的博客
07-01 3105
问题:两个表单切换,分别使用不同校验规则,校验规则失效 解决思路:1.切换时使用resetField对该表单项进行重置，将其值重置为初始值并移除校验结果 问题本质:即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。 loginTypeFlag() {
el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法
您的博客
03-27 1629
el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法
el-form-item循环表单校验
08-30
在使用el-form-item循环表单校验时，可以考虑以下方法。首先，确保在el-form中绑定的是正确的form数据，如引用所示。然后，在循环遍历表单项的时候，需要在每个el-form-item上设置唯一的prop值，用于校验规则的匹配...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值