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

最新推荐文章于 2023-10-29 13:08:22 发布
最新推荐文章于 2023-10-29 13:08:22 发布
阅读量398 收藏
点赞数
分类专栏： vue JavaScript element-ui 文章标签： 前端 element-ui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn6107/article/details/128082344
版权

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

el-form动态表单验证（v-if、v-show导致校验失效的bug）
YSD2468的博客
04-13 2705
今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。 一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 4368
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
vue el-form多个表单同时验证必填项
在路上`的博客
08-23 3615
一个页面上多个表单需要在一个操作情况下同时验证必填项是否填写完整 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 5231
可利用Promise异步控制 const rule1 = new Promise((resolve,reject) => { this.$refs['xuForm'].validate(valid => { if(valid){ resolve() }else{ ...
一个vue组件包含多个form表单（多个组件）的验证
simple2321的博客
02-01 6436
解决一个页面数据过多导致页面卡顿问题 解决方案：一个页面拆分成多个页面实现 注意事项: 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 243
组件的构成一个再复杂的组件，都是由三部分组成的：prop、event、slot，它们构成了 Vue.js 组件的 API。如果你开发的是一个通用组件，那一定要事先设计好这三部分，因为组件一旦发布，后面再修改 API 就很困难了，使用者都是希望不断新增功能，修复 bug，而不是经常变更接口。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。属性 pr...
v-if 切换多次切换相同模板问题
weixin_48909429的博客
10-31 301
这种情况下需要，增加个属性：key=“”，这样可以多个相同的template并列进行切换了。v-show则不需要。小伙伴们可能会遇到一种情况，使用v-if进行切换的时候，虽然if条件值发生改变，但是if条件仅仅编译了一次。
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
vue el-form同时对多个表单进行验证 activated
周家大小姐
08-04 1461
看代码,因为我这是步骤条;可能和常规的有点不一样;大家根据需求改就可以 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.
在一个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 1287
ElementUI的表单效验问题 （一个页面两个form（数据相似））
el-form多个表单同时验证
weixin_38007986的博客
09-25 2059
两个表单同时验证:有两个表单或者一个表单验证情况 当数组存在时验证两个表单否则验证一个
Element 多个Form表单 同时验证
最新发布
weixin_71403100的博客
10-29 5481
在一个页面中需要实现两个Form表单，并在页面提交时需要对两个Form表单进行校验，两个表单都校验成功时才能提交。
elementui 一个dialog下的多个form表单与步骤条整合
weixin_43937851的博客
07-31 1700
elementui 一个dialog下的多个form表单与步骤条整合
多个el-form表单统一校验
LETEfly的博客
05-22 2144
通过Promise.all实现多个el-form表单的统一校验，避免回调地狱。
element 多个表单同时验证
xy19950125的博客
12-27 3173
做后台管理项目 最常见的就是表格的验证了 简单的表单是很简单的 如果涉及到 表格内部嵌套表单、多表单同时验证时及其他复杂验证时 就相对就有些棘手了 下面我们就先讲一下 多表单同时验证的情况 显然 多表单就是一个页面同时使用多个表单 通常不多见 先看下使用场景吧 单独的每个标签模块都是一个form 并不是说一个表单满足不了 而是根据业务需求和场景来定义多个 直接来看个demo吧 我...
一个页面向同一个地方提交两个form表单
weixin_41695715的博客
04-18 2400
两个form 内容 class 和对应的参数可以一样 但是需要注意js提交登录信息时，需要定位到当前的点击对象 用ajaxBtn(this)，给方法添加this参数， 当点击提交按钮，则触发onclick=ajaxBtn（this）； 会用到 Jquery的 parents方法 parents() 方法返回被选元素的所有祖先元素，返回的是jQuery对象 选择器 $(obj).parents()返回的是父节点元素 function ajaxBtn(obj) {...
el-from 先编辑 在打开新增的时候 el-form 表单下拉框会触发验证 这个怎么解决
06-01
这个问题可能是由于 el-form 表单在新增时触发了验证导致的。您可以通过在 el-form 标签上添加 `ref` 属性，并在新增时手动调用表单的 `resetFields` 方法来解决这个问题，示例如下： ```html <el-form ref="myForm"> <!-- 表单内容 --> </el-form> ``` 在新增时，先通过 `$refs` 获取表单实例并调用 `resetFields` 方法： ```js this.$refs.myForm.resetFields() ``` 这样可以重置表单的验证状态，避免在新增时触发验证。同时，您也可以在需要验证时再手动触发表单的验证方法，例如： ```js this.$refs.myForm.validate((valid) => { if (valid) { // 表单验证通过，执行保存操作 } else { // 表单验证不通过，提示用户 } }) ``` 这样可以在用户点击保存按钮时触发表单的验证，而不是在表单初始化时就触发验证。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值