element-ui | 第一次表单验证的结果，在第二次表单验证时仍然存在

最新推荐文章于 2024-04-20 20:04:12 发布
最新推荐文章于 2024-04-20 20:04:12 发布
阅读量8.2k 收藏 8
点赞数 5
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37930716/article/details/90234705
版权
本文介绍了一种在前端开发中解决表单重复验证遗留问题的方法。通过在窗口打开时重置表单项，确保每次验证都是从初始状态开始，避免了上一次验证结果对后续操作的影响。

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

今天来看个问题：第一次表单验证的结果，在第二次表单验证时仍然存在。怎么解决呢？

解决办法：

在窗口打开时，对该表单项进行重置，将其值重置为初始值并移除校验结果

if (this.$refs.editForm)

this.$refs.editForm.resetFields();

注意！！！！一定要加if (this.$refs.editForm)，因为第一次打开是undefined，直接执行this.$refs.editForm.resetFields();会报错。

现在来看下效果，完成~

在使用elementui的表单验证时，明明输入了字符，却仍然弹出验证错误提示栏
Better_me_1996的博客
06-02 1214
在使用elementui自带的表单验证时需要注意，需验证的表单项el-form-item要添加prop属性，而且表单项prop的名字必须和表单model传入对象的属性名一致，否则表单验证就会报错。
vue element-ui 表单验证 第一次表单验证的结果，在第二次表单验证时仍然存在（需要清除上一次的验证结果）
acoolgiser的博客
05-15 4813
首先我们还是看一下文章：https://blog.csdn.net/weixin_37930716/article/details/90234705 的内容 笔者在参考该文章的时候，踩了一个坑，是vue父子组件通信中使用ref传参的问题！ 关键点： 该文章的作者的弹框组件是和父组件写在同一个vue文件里的，也就是没有单独把弹框的页面代码写在另一个vue文件里。这样在父子组件通信的时候其实只有两级通信，如果写在单独的一个vue文件里，实际上就是三级通信。 清除上一次验证结果的代码就应该是： if.
对于element 的表单会二次校验问题
qq_38181746的博客
08-17 1692
表单校验二次校验 在我们开发过程中会遇到校验表单的情况，我们只想在提交的时候去校验表单，但是会遇到比如Dialog表单提交的时候校验一次后，再次打开弹窗还会校验一次，解决办法加上 代码 if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …s.form){ this.refs.form.resetFields(); } ...
elementui异步后台校验表单，修改重复校验
weixin_30814223的博客
05-31 1412
elementui简单的form校验这里就不介绍了，这里主要记录下如何通过后台进行指定字段的异步后台校验。 1.导入axios <script src="https://unpkg.com/axios/dist/axios.min.js"> //为了保证引用速度，可以把axios的js文件copy到项目文件中 2.注意校验方法的位置 var vue = new Vue({...
Element plus Form 表单验证执行两次，问题原因及解决办法
lixianlong1234的博客
07-21 2004
Element plus Form 表单验证执行两次，问题原因及解决办法
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
详解element-ui中表单验证的三种方式
10-16
在使用Element-UI开发时，表单验证是必不可少的功能之一，它可以帮助我们保证用户输入的数据是正确和有效的。本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。 首先，Element-UI提供的...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
在开发Web应用时，我们经常需要处理复杂的表单数据，特别是在使用Element-UI与Vue.js框架的情况下。Element-UI提供了一套丰富的UI组件库，其中包括表格（Table）和表单（Form），它们可以帮助我们构建出美观且功能...
element-ui.rar element-ui核心库压缩包
12-20
这段代码展示了如何创建一个包含两个输入字段的表单，并使用 Element UI 的表单验证功能。当点击“提交”按钮时，会调用 `submitForm` 方法，如果表单验证通过，会显示提示信息。 总的来说，Element UI 是 Vue.js ...
element中关于二次进入页面后form表单中的rules直接进行校检问题解决方案
weixin_43989837的博客
11-09 1179
问题描述: 进入页面表单中的必选项就被校监了,然后报红. 解决方案: 你可以在生命周期中,以及你的初始化函数中添加下面的代码,让其进入页面不再校监. 取消校验 全部取消：this.$refs.form.clearValidate() 取消指定字段：this.$refs.form.clearValidate(['name']) ...
Element二次弹窗出现表单验证失败问题
weixin_45894503的博客
04-28 792
项目场景： Element二次弹窗出现表单验证失败问题 问题描述 第一次打开弹窗按钮上加入$nextTick(),重置表单即可 handleAtrack(row){ this.queryObj = JSON.parse(JSON.stringify(row)) this.innerVisible = true this.$nextTick(()=>{ this.$refs.ruleForm.resetFields() })
关闭element UI的弹窗，再次打开显示表单验证提示
workhard0905的博客
09-27 2283
关闭element UI的弹窗，再次打开显示表单验证提示
el-form表单双层验证和自动验证的bug
MISS_zhang_0110的博客
12-15 2130
element-ui表单双层验证和自动验证的bug一级目录二级目录三级目录 一级目录 二级目录 三级目录
element-ui 表单二次计入页面取消 上一次的校验
IT13333的博客
10-11 534
1.预审核申请界面除了证件类型字段，其余字段都变成都校验失败，并且界面字段输入框为红色；你可以在生命周期中,以及你的初始化函数中添加下面的代码,让其进入页面不再校监.1.此时界面字段都应处于默认状态(灰色)，详细可查看下图所示；1.进入信息预审核界面，点击【添加】按钮进入预审核申请界面；4.再次点击【添加】按钮进入预审核申请界面；2.不输入任何信息，直接点击【保存】按钮；3.点击【取消】按钮推行胡预审核申请界面；
layui框架实战案例(27):弹出二次验证
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-20 421
layui勾选删除弹出二次验证
vue 关闭弹框重新打开时element输入框验证规则还在提示
weixin_45102212的博客
01-21 3627
1、表单中输入经常使用验证，但是每次提交后关闭弹框。再打开弹框验证还在作用，这个时候我们可以这样处理： 2、我们可以使用这2种方法处理： ①：在关闭弹框的地方： this.$refs.form.clearValidate(); this.$refs.form这个form必须是和图片上的名称一致； 这种方法适合全部 ②：如果是单个的可以使用： this.$refs.form.validateField('unitName') 如果这样报错的话，可以试一试这样写，不会报错： this.KaTeX p
elementUI form每次进去页面会显示上次页面的验证规则提示信息
qq_42440919的博客
01-28 371
elementUI form 页面显示上次规则提示
ElementUI @change更改select 表单验证失效的解决办法
crabfrog的博客
11-03 4613
ElementUI @change更改select 表单验证失效的解决办法 起因是这样的，表单有一处，两个Select 选择器是上下级的关系，于是我想到了使用Cascader 级联选择器，来避免先选后选的问题。但是这里的选项 是分成两个数组的 提交时也是两个字段。用v-model肯定是不行了。只好用@change来绑定值。 HTML <el-form-item label="申请项目" prop="applyProject"> <el-cascader
Element-UI + Vue 表单验证解决方案
"本文主要探讨了在Vue项目中，结合element-ui组件库如何实现表格内嵌表单验证的功能，提供了一种解决方案，并通过代码示例进行了详细说明。" 在开发Web应用时，尤其是在处理数据录入和编辑的场景中，我们常常需要在...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值