element-ui的el-form验证和el-dialog关闭时清除验证

最新推荐文章于 2024-04-25 16:37:07 发布
原创 最新推荐文章于 2024-04-25 16:37:07 发布 · 6.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementUI的表单和弹窗一起使用时注意的问题

本文探讨了Vue中表单重置与验证的常见误区，指出直接使用this.$refs[formName].resetFields()可能导致的问题，并介绍了正确的使用方法：先使用this.$refs[formName].clearValidate()清除验证，然后清空表单数据，特别是在关闭对话框或取消表单操作时。文章还分享了一个公共函数来简化这一过程。

误区

  • 之前使用的一直是重置表单(this.$refs[formName].resetFields(); )还是会报红,
正确的使用方法
  • 使用清除验证(this.$refs[formName].clearValidate(); ),但是使用这个的时候要注意还要清除表单数据,尤其是在点击el-dialog的关闭事件和表单的取消按钮时候,不然会出现打开弹窗时,虽然没有报错,但是还有有值的bug;
  • 处理的思路
    先写一个重置表单的公共函数;
    再调用这个函数,提高函数复用
避免在使用Element-UI el-form时的resetFields陷阱
qq_36463299的博客
06-23 1005
在使用Vue.js结合Element-UI开发表单时，的方法是一个常用的功能，用于重置表单项到初始状态。然而，这个方法在某些情况下可能导致一些不易察觉的问题。本文将分享一个实际遇到的使用陷阱，并提供一个解决方案。假设我们正在开发一个产品管理系统，其中包含“添加产品”和“修改产品”两个功能。我们使用Element-UI的来构建表单，并使用方法来重置表单数据。在实现“添加产品”对话框时，我们遇到了一个问题：当从修改模式切换到添加模式时，即使调用了，表单字段也没有正确重置，导致旧的值依然残留。初次尝试解决问题时，
Element-UI el-dialog 二次封装复用
Sandy_zhi的博客
08-07 3906
我很希望项目中可以多接触一些新东西，实践出真知，对于编程来说就是要多动手，多总结几录，多思考，才能更好的避坑，因为动手了会发现好多你以为的不是你以为的。
elementui form表单验证清除
qq_42423991的博客
01-17 1809
全部清除： this.$nextTick(() => { this.$refs['ruleForm'].clearValidate()// 清除表单验证 }) 清除指定的验证： this.$nextTick(() => { this.$refs['ruleForm'].clearValidate(['time'])// 清除单独的表单验证 }) ...
如何清除el-dialog中的表单验证
weixin_30588907的博客
06-20 365
经常我们使用element-ui中el-dialog组件，在组件中使用表单，没有打开弹窗都要把之前的表单验证清除掉，那么如何处理呢？ 需要在组件打开的时候使用组件的clearValidate方法 open () { this.showFlag = true this.$nextTick(() => { this.$re...
element ui中 el-dialog关闭窗口清空表单验证
weixin_35748962的博客
01-18 829
在element ui中，可以在关闭窗口时通过调用表单的resetFields()方法清空表单验证。例如： <el-dialog :visible.sync="dialogVisible" @close="dialogVisible = false; form.resetFields()"> <el-form ref="form"> <!-- 表单...
el-form 组件清除校验提示
weixin_50627864的博客
01-22 1196
【代码】el-form 组件清除校验提示。
elementui form 清除单个值的校验
nishiweiyj的博客
05-31 673
【代码】elementui form 清除单个值的校验。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当对话框在不刷新页面的情况下被多次打开，可能会遇到自动校验的问题，即使用户没有主动触发校验。 这个...
element ui里dialog关闭后清除验证条件方法
08-27
Element UI 中 Dialog 关闭后清除验证条件方法 Element UI 是一个基于 Vue.js 的桌面端组件库，提供了许多功能强大且易用的组件，其中 Dialog 组件是其中一个非常常用的组件。然而，在使用 Dialog 组件时，经常会...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
总之，解决Vue和Element-UI的`resetFields()`方法重置表单无效问题，关键在于正确设置`ref`和`prop`属性，并在适当的时候对表单数据进行重置和清除验证结果。理解`resetFields()`方法的机制，以及如何在Vuex环境中...
ElementUI 中的Dialog嵌套form表单时出现校验清除残留问题
小火车况且况且况且的博客
10-16 2961
ElementUI 中的Dialog嵌套form表单时出现校验清除残留问题 问题描述 : 当出现多个弹出框的时候(比如新增和编辑), 调用组件自带的resetFields 和 clearValidate 方法可能不起作用 目前的解决方法: 2.1 给form设置 validate-on-rule-change 为false 2.2 或者将resetFields 和 clearValidate方法...
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
elewen110的专栏
05-06 4340
在 closed 中先将 form 对象重置为初始值（跟data 中的值相同），然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处（跟其他解决方式相比）是没有任何使用体验上的损失。 <el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" > <el-form :model="dialogForm" :rules="rules" ref="dialogForm"&.
el-dialog关闭后清除校验以及重置数据
yangqii的博客
05-13 4716
参考文章：vue使用el-dialog关闭后重置数据的最佳方法 （1）el-dialog绑定close事件 （2）close事件内定义关闭窗口后需要做的操作 1、清除表单校验---this.$refs[formName].clearValidate() //this.$refs.formName.clearValidate() 2、重置数据 （1）this.$refs[formName].resetFields() //this.$refs.formName.clearValidat...
Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态
月色真美121的博客
07-19 5041
Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态
element ui,监听el-dialog弹框，清除内容和校验规则
xx820702的博客
08-08 836
element ui,监听el-dialog弹框，清除内容和校验规则
element ui Dialog 对话框关闭后——清除表单的效验方法（更简便写法）
lyq1948的博客
06-28 1935
主要代码：在关闭弹窗时 有个组件的关闭的回调 @close='cancel' 调用这 cancel方法就可以实现 关闭的同时清除表单效验。
vue+elementUi——form表单校验提示清除(技能提升)
热门推荐
yehaocheng520的博客
08-10 1万+
今天在写后台管理系统时，用到了表单校验，为了能够校验必填项和类型等，需要用到表单中的 rule校验规则。最终效果如下： 由于在此页面上，禁用和删除两个功能基本类似，因此我是共用的一个弹窗展示。 所以导致，在禁用页面表单校验完成后，再进入删除页面时，在没有点击提交按钮时，就直接进行了表单校验，提示了校验报错信息。这样并不影响使用，但是页面美观度会差很多。 因此需要在进入此弹窗页面时，清除表单校验。 clearValidate的用法 我从网上找到的校验方法是：this.$refs[formName].cle
移除表单项的校验结果的用法
最新发布
weixin_61978391的博客
04-25 2270
el-form-item label="材料类型：" :prop="'RawList.' + index + '.MaterialType'" :rules="rules.MaterialType">问题：当等于钢板时，是必填的，有必填校验，这时候，把材料类型换成型钢，板厚是不必填的，板厚前面的红色*已经没有了，但是上一次的校验结果还是在下面显示着。需求：表单中有一块的数据是可以手动动态增加的，同时板厚的是否必填是和材料类型有关的，当材料类型等于钢板时，板厚是必填的，当等于型钢时，是非必填的。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值