在同一个组件中，使用两个el-form并使用v-if做区分的情况下，触发表单验证会同时验证两个表单

最新推荐文章于 2023-10-29 13:08:22 发布
原创 最新推荐文章于 2023-10-29 13:08:22 发布 · 426 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #element-ui #vue

当在同一个Vue组件内使用两个el-form并用v-if进行切换时，遇到触发表单验证会同时验证两个表单的问题。解决方法是在每个form元素上添加独特的key属性，以确保Vue能够正确区分它们，避免不必要的验证。

在同一个组件中，使用两个el-form并使用v-if做区分的情况下，触发表单验证会同时验证两个表单

解决办法： 在两个form元素中各自加上不一样的key属性

【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 4676
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
vue el-form同时对多个表单进行验证 activated
周家大小姐
08-04 1569
看代码,因为我这是步骤条;可能和常规的有点不一样;大家根据需求改就可以 resetFields,clearValidate清空和重置为二选一,所以不能同时使用 <!-- * @Author: your name * @Date: 2021-08-03 15:25:06 * @LastEditTime: 2021-08-04 11:23:07 * @LastEditors: Please set LastEditors * @Description: In User Settings E.
vue el-form多个表单同时验证必填项
在路上`的博客
08-23 3660
一个页面上多个表单需要在一个操作情况下同时验证必填项是否填写完整 html <template> <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" > <el-form-item label="订单号:" v-if="editorShow" class="el-fo
vue一个界面有两个form表单如何进行校验
那一日面朝大海的博客
04-15 5288
可利用Promise异步控制 const rule1 = new Promise((resolve,reject) => { this.$refs['xuForm'].validate(valid => { if(valid){ resolve() }else{ ...
一个vue组件包含多个form表单（多个组件）的验证
simple2321的博客
02-01 6533
解决一个页面数据过多导致页面卡顿问题 解决方案：一个页面拆分成多个页面实现 注意事项: 1、父组件引入的子组件要有ref属性，并传入父组件v-model绑定form数据（目的整合所有子组件的form数据） 2、子组件通过props接收父组件传来的数据，watch监听父组件传来的数据， 将其深拷贝给子的v-model绑定form数据 3、子组件正常检验form表单 4、父组件提交时，子组件在父组件的验证通过this.refs.A(在父注册的子ref名称).refs.A(在父注册的子ref名称).
js修改id的值_Vue.js 组件的三个 API：prop、event、slot
weixin_39900582的博客
12-03 269
组件的构成一个再复杂的组件，都是由三部分组成的：prop、event、slot，它们构成了 Vue.js 组件的 API。如果你开发的是一个通用组件，那一定要事先设计好这三部分，因为组件一旦发布，后面再修改 API 就很困难了，使用者都是希望不断新增功能，修复 bug，而不是经常变更接口。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。属性 pr...
v-if 切换多次切换相同模板问题
weixin_48909429的博客
10-31 321
这种情况下需要，增加个属性：key=“”，这样可以多个相同的template并列进行切换了。v-show则不需要。小伙伴们可能会遇到一种情况，使用v-if进行切换的时候，虽然if条件值发生改变，但是if条件仅仅编译了一次。
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题
鸭绒的博客
04-10 3483
说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。 示例代码： <template> <el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
01-19
代码如下:<form onsubmit=”aa(this);”> <input type=”text” name=”” value=”test” /><input type=”submit” value=”提交” /> </form> <iframe src=”” name=”fA” frameborder=”1″ scrolling=”no”></iframe> <iframe src=”” name=”fB” frameborder=”1″ scrolling=”no”></iframe> [removed] function aa(oForm)
ElementUI的表单效验问题 （一个页面两个form（数据相似））
CHunter1024的博客
08-28 1343
ElementUI的表单效验问题 （一个页面两个form（数据相似））
el-form多个表单同时验证
weixin_38007986的博客
09-25 2098
两个表单同时验证:有两个表单或者一个表单验证情况 当数组存在时验证两个表单否则验证一个
Element 多个Form表单 同时验证
weixin_71403100的博客
10-29 5914
在一个页面中需要实现两个Form表单，并在页面提交时需要对两个Form表单进行校验，两个表单都校验成功时才能提交。
elementui 一个dialog下的多个form表单与步骤条整合
weixin_43937851的博客
07-31 1790
elementui 一个dialog下的多个form表单与步骤条整合
多个el-form表单统一校验
LETEfly的博客
05-22 2496
通过Promise.all实现多个el-form表单的统一校验，避免回调地狱。
element 多个表单同时验证
xy19950125的博客
12-27 3210
做后台管理项目 最常见的就是表格的验证了 简单的表单是很简单的 如果涉及到 表格内部嵌套表单、多表单同时验证时及其他复杂验证时 就相对就有些棘手了 下面我们就先讲一下 多表单同时验证的情况 显然 多表单就是一个页面同时使用多个表单 通常不多见 先看下使用场景吧 单独的每个标签模块都是一个form 并不是说一个表单满足不了 而是根据业务需求和场景来定义多个 直接来看个demo吧 我...
一个页面向同一个地方提交两个form表单
weixin_41695715的博客
04-18 2455
两个form 内容 class 和对应的参数可以一样 但是需要注意js提交登录信息时，需要定位到当前的点击对象 用ajaxBtn(this)，给方法添加this参数， 当点击提交按钮，则触发onclick=ajaxBtn（this）； 会用到 Jquery的 parents方法 parents() 方法返回被选元素的所有祖先元素，返回的是jQuery对象 选择器 $(obj).parents()返回的是父节点元素 function ajaxBtn(obj) {...
使用两个el-form 表单验证失效
最新发布
01-01
### 解决 Vue Element UI 中两个 `el-form` 表单同时存在时验证失效的问题 当在同一页面中有多个 `el-form` 组件共存并遇到验证失效的情况时，可以采取以下措施来确保表单验证正常工作。 #### 方法一：设置弹窗...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值