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

最新推荐文章于 2024-08-09 11:28:10 发布
最新推荐文章于 2024-08-09 11:28:10 发布
阅读量6.3k 收藏 4
点赞数
文章标签： elementUI的表单和弹窗一起使用时注意的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webfullstack/article/details/84336947
版权

误区

  • 之前使用的一直是重置表单(this.$refs[formName].resetFields(); )还是会报红,
正确的使用方法
  • 使用清除验证(this.$refs[formName].clearValidate(); ),但是使用这个的时候要注意还要清除表单数据,尤其是在点击el-dialog的关闭事件和表单的取消按钮时候,不然会出现打开弹窗时,虽然没有报错,但是还有有值的bug;
  • 处理的思路
    先写一个重置表单的公共函数;
    再调用这个函数,提高函数复用
AlexKain
关注
专栏目录
Element-UI快速入门
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
Element-ui 为什么el-form-item的rules校验规则不生效
星云
10-04 7087
# 原因 ## 错误 ```html <el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/> </el-form-item> ``` ## 改正 ```html <el-form-item :label="label" :rules="rules"
如何清除el-dialog中的表单验证
weixin_30588907的博客
06-20 326
经常我们使用element-ui中el-dialog组件，在组件中使用表单，没有打开弹窗都要把之前的表单验证清除掉，那么如何处理呢？ 需要在组件打开的时候使用组件的clearValidate方法 open () { this.showFlag = true this.$nextTick(() => { this.$re...
el-form表单校验的开启或关闭
最新发布
m0_58293192的博客
08-09 167
el-form表单校验的开启或关闭
ElementUI 中的Dialog嵌套form表单时出现校验清除残留问题
小火车况且况且况且的博客
10-16 2847
ElementUI 中的Dialog嵌套form表单时出现校验清除残留问题 问题描述 : 当出现多个弹出框的时候(比如新增和编辑), 调用组件自带的resetFields 和 clearValidate 方法可能不起作用 目前的解决方法: 2.1 给form设置 validate-on-rule-change 为false 2.2 或者将resetFields 和 clearValidate方法...
element ui中 el-dialog关闭窗口清空表单验证
weixin_35748962的博客
01-18 734
在element ui中，可以在关闭窗口时通过调用表单的resetFields()方法清空表单验证。例如： <el-dialog :visible.sync="dialogVisible" @close="dialogVisible = false; form.resetFields()"> <el-form ref="form"> <!-- 表单...
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
elewen110的专栏
05-06 4049
在 closed 中先将 form 对象重置为初始值（跟data 中的值相同），然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处（跟其他解决方式相比）是没有任何使用体验上的损失。 <el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" > <el-form :model="dialogForm" :rules="rules" ref="dialogForm"&.
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当对话框在不刷新页面的情况下被多次打开，可能会遇到自动校验的问题，即使用户没有主动触发校验。 这个...
vue使用Element-ui el-dialog弹出层
aaaaaaddddsssss的博客
02-21 1124
点击添加歌手 弹出 <template> <div class="table"> <div class="container"> <!-- 添加歌手按钮 --> <div class="handle-box"> <el-button type="primary" size="mini" @click="centerDialogVisable=true">添加歌手</el-.
vue+element-ui使用
01-06
Element UI 还提供了很多其他功能强大的组件，比如对话框（`el-dialog`）、表单组件（`el-form`、`el-input` 等）、导航（`el-menu`、`el-breadcrumb` 等）和数据展示组件（`el-table`、`el-tree` 等）。每个组件都...
el-dialog关闭后清除校验以及重置数据
yangqii的博客
05-13 4464
参考文章：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...
element ui,监听el-dialog弹框，清除内容和校验规则
xx820702的博客
08-08 756
element ui,监听el-dialog弹框，清除内容和校验规则
element ui Dialog 对话框关闭后——清除表单的效验方法（更简便写法）
lyq1948的博客
06-28 1745
主要代码：在关闭弹窗时 有个组件的关闭的回调 @close='cancel' 调用这 cancel方法就可以实现 关闭的同时清除表单效验。
Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态
月色真美121的博客
07-19 3966
Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态
el-form表单如何清除校验提示语
qq_42453751的博客
08-25 5586
el-form表单如何清除校验提示语 实现的表单如下： 步骤1.当未选择持卡人时，点击确认按钮，提示校验规则 步骤2.当选择关闭表单的时候，不会提示 步骤3.再次点进表单的时候（此时持卡人栏没有任何数据），校验规则不出现 问题：再次点击表单进入时，出现了校验规则 解决办法： 重点代码 :model=“fingerFrom” <el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di
element ui 表单确认提示红色，取消提示方法
宁夏前端工程师，马卫斌，wx：1457508895
01-29 1931
element ui 表单确认提示红色，取消提示方法
【Element】el-form表单初始化，校验就报红提示
weixin_43951592的博客
09-01 2780
element表单
vue element ui From表单校验 关闭模态框 重新打开 还存在标红校验
奔跑吧代码
11-17 3625
vue element ui From表单校验 关闭模态框 重新打开 重置表单解决标红校验 仅供参考 自我记录. 解决方案① 在关闭模态框是 调用this.$refs.ruleForm.resetFields()重置表单 collectPigeonConfigClose(){ this.collectPigeonConfigVisible = false // this.$nextTick(()=>{ this.$refs.ruleForm.resetF
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值