el-form表单进行验证时，出现验证结果显示在另外一个组件的情况

最新推荐文章于 2024-08-09 11:32:09 发布
最新推荐文章于 2024-08-09 11:32:09 发布
阅读量475 收藏 7
点赞数 9
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44209077/article/details/136510124
版权
文章讲述了在Vue应用中，使用v-if控制组件显示时遇到表单验证结果错位的问题，通过改用v-show解决了这个问题，强调了两者在处理动态渲染时的不同影响。
摘要由CSDN通过智能技术生成

由于表单的某个组件是通过v-if来判断是否显示的，进行表单验证，然后切换显示的条件，导致该组件的验证结果显示在另外一个组件的情况，将v-if改为v-show就不会出现这种情况。

结果图：

风依着你
关注
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
vue element el-form多表单验证.txt
09-17
// 只要有任意一个表单验证失败则 catch 函数会被调用 console.log("至少有一个表单验证失败！"); return false; // 返回 false 表示验证未通过 }); ``` #### 四、总结 通过以上步骤，我们成功地实现了 Vue ...
解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题
Mr_Jule的博客
05-31 2119
解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题
element-ui，在同一个页面中使用多个表单，验证时互相影响的问题
xiao_fei_yang_的博客
04-21 3875
在这里插在这里插入代码片入代码片@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：...
使用elementUI的form表单校验时，错误提示位置异常解决方法
xuelong的博客
05-22 1091
最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图
el-form校验项为数组&&组件是自定义组件校验遇到的坑
qq_44741577的博客
08-09 556
validator的参数有：(rule, value, callback)，前三个比较重要。rule：指向该条规则对象。value：新的值，用于参与运算、对比。callback：执行回调，使用方法是：callback(‘…’);。如果不传参：表示验证通过，一般不必专门强调。字符串会作为错误提示，但是显示优先级低于外层的message。比如callback(‘内层错误提示’);跟message: '外层错误提示’同时存在，则会提示：外层错误提示。data() {
vue+elementui form多表单校验
I_recluse的博客
12-01 2684
vue+elementui，使用form表单时，有时需要用到多表单一起验证，待都校验通过后再执行后续动作。 解决方法：先对每一个表单进行校验，返回一个promise对象，然后使用Promise.all方法对所有返回的promise对象判断，全部是fulfilled的时候执行后续逻辑。代码如下： <template> <div> <el-form ref="form1" :model="form1" :rules="rule
el-form表单验证，表单项v-if切换显示，校验错误信息未清除
qq_35666211的博客
11-01 443
表单v-if 切换例如：企业承担费率是根据前面个人材料金额的值进行v-if动态显示,当在个人材料金额是实发金额状态时，有错误提示，不清空，切换个人材料金额为开票金额，这时候没有企业承担费率表单项，却仍然显示企业承担费率校验错误提示。
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
el-element form表单组件 对非表单内字段做校验
gp_911014的博客
05-19 1190
在日常开发写表单的时候，可能会遇到某一个form-Item中绑定的值不在表单绑定的数据对象中。用于表单域验证错误信息，设置该值会使表单验证状态变为error，并显示该错误信息。此时用prop绑定该字段名是无效的，需要单独对这个字段进行校验。在 form-Item 中有一个属性。
el-form校验绑定非表单内容
m0_66300374的博客
08-09 275
需求：给表单加个必填问题：本地绑定的是自定义的字段。
Element-ui表单验证规则和提交前预验证的关系
weixin_52213331的博客
05-12 364
使用Element-ui表单时，表单验证规则中无论验证结构如何，都必须要有callback()回调函数，否则会导致提交前预验证的validate函数 代码如下： //邮箱验证,使用正则表达式进行匹配 var validateEmail = (rule, value, callback) => { let reg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/ if (!reg.test(this.ruleForm..
from表单提交数据 验证后跳转页面
yyxcy的博客
08-06 2190
from表单提交数据 验证后跳转页面 最近在弄这一块 验证使用alter老师弹出框后直接跳转到了下个页面 return false都不管用 所以记录一下 下次还能使用 <form action="跳转地址" method="post" enctype="multipart/form-data" id="FormFkAdd" onsubmit="return Next()"> 在from标签使用onsubmit 配合 <button type="submit" class="
el-form表单验证触发过当前校验之后 再切换到其他的校验 会被上一个校验阻止
qq_40673807的博客
08-08 307
只要在有校验的el-form-item中添加一个key=“xx”就好了 效果如下。
el-form 加 v-if使用时出现的校验混乱的问题。
weixin_43936040的博客
08-18 924
有的时候会有选择不同的部分，那页面展示页不同功能的需求 其中这整个页面的输入框和下拉选项都是套在一个form里面的。切换的时候会有表单校验突然又冒出来的情况 情况说明 整个页面都是套用在一个form里面，选择内部外部的时候要清空掉相应的字段。 清空相应的字段后会调用一个去掉表单验证的方法this.$refs.addForm.clearValidate(); 保存的时候会整体进行校验核查一边，所以不同模块选择基本时用v-if判断的。 处理相应的方法 表单校验的时候要校验的字段一定要在data里先声明
Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误
god_sword_的博客
03-01 4654
Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误
el-form 表单校验，根据下拉内容 v-if 动态展示字段，校验不清空/不重置问题
Shimeng_1989的博客
03-27 1852
问题：v-if切换前，如果有校验错误提示，则v-if切换后，不清空，仍旧会显示切换前的校验错误信息。场景：会根据”供应商分类“的选择，动态展示不同的填写内容。
element-ui 表单渲染v-if组件，验证报错
热门推荐
ifredom
12-21 2万+
问题描述 使用elementui的form表单组件，如果其中几个表单项使用了v-if进行UI切换，并且默认v-if="false"不可见，切换的元素又是必填项时，那么在验证的时候，就会出现很奇怪的bug。 原因： elementui在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，...
vue3 el-form 表单验证
最新发布
10-17
在 Vue3 中，`<el-form>` 是 Element ...3. **错误提示**：`el-form` 会在输入不合规时显示错误信息，你可以通过 `<el-form-item>` 的 `error-message` 或者 `el-form` 的 `inline-message` 来控制错误消息的展示位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值