el-dialog中表单校验问题:第二次打开时会触发校验

已于 2022-03-22 18:25:28 修改
阅读量2.4k 收藏 6
点赞数 2
分类专栏： vue 文章标签： vue.js
于 2021-11-25 17:50:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28259083/article/details/121543521
版权
本文探讨了在Vue.js中如何根据变量设置表单字段的required校验规则。通过示例展示了当type值变化时，name字段的必填性也随之改变的实现方式，强调了rules规则应该放在el-form-item元素内，以确保在dialog重新打开时正确触发校验。
摘要由CSDN通过智能技术生成

当required属性为变量时，rules规则应写在el-form-item项上，如果写在el-form上，则第二次打开dialog时会触发校验并且显示校验结果。
eg:
假设有单选项type，枚举值为1，2。
另有一项name，type值为1时必填，type值为2时非必填。校验规则如下

<el-form-item prop="name" :rules="[{ required: this.form.type === 1 ? true : false, message:  '请输入', trigger: 'blur' }]"></el-form-item>
触不到的颜色是否叫彩虹
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
【动态表单】vue动态表单第二次打开没点提交就开始校验了
qq_38411225的博客
01-17 1063
vue动态表单第二次打开没点提交就开始校验了新项目基于vue加ruoyi做动态表单踩坑 新项目基于vue加ruoyi做动态表单踩坑 1 . 动态渲染的组件在el-dialog里面抱着用true或false去控制是否弹出， 在正常组件表单写法，可以在点击事件就打开这个遮罩层。但是因为是动态表单里面表单渲染要先调取一次接口后动态渲染。刚开始也是直接在点击事件打开弹出框但是出现两个问题，一个是同一个表单第二次打开不管写了没写都会触发校验，满屏红框。还有就是如果里面有一个select下拉框第一次打开的表单会造成打
vue3+ elementPlus PC端开发 遇到页面已进入就form校验了的问题
最新发布
web_zq的博客
06-07 571
PC端 vue3+ elementPlus 遇到的打开页面就触发form 校验问题
【vue3 + elementPlus】解决关闭弹窗重新打开后表单校验存在
qq_36687211的博客
06-15 1742
问题：打开弹窗保存后重新打开弹窗触发表单校验。解决：打开弹窗时触发open函数清除表单校验。
关闭element UI的弹窗，再次打开显示表单验证提示
workhard0905的博客
09-27 2112
关闭element UI的弹窗，再次打开显示表单验证提示
项目小操作：form表单的校验，以及第二次显示提示校验内容等问题
Y4258的博客
08-05 3701
自己规整，记录学习
elementUI关闭弹框后再打开弹框 弹框中的表单进行了验证
xc_buxiangzhangda的博客
02-19 3442
相信有很多人遇到过，新增验证并提交成功后关闭弹框，再次新增时，弹框中的表单验证提示为空等； 这是因为在上次关闭弹框时未初始化表单未清除验证； 在element中很好处理，只要是用prop属性做的验证都可以用resetFields &lt;el-dialog :title="新增XXX" :visible.sync="true" @close="closeDialog"&gt; &lt;...
element ui 对话框el-dialog关闭事件详解
08-27
`el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要在用户关闭对话框后执行某些清理工作时，如清空输入数据、恢复初始状态或者更新视图等。下面我们详细讲解 `el-dialog` 的关闭事件及其用法。 ###...
解决element-ui对话框el-dialog初始化的校验问题
TVM的博客
06-17 2675
不刷新页面重新打开el-dialog时，如果我们绑定了rules或者某个值需要required，它总会自动校验。 查看了多个博文，发现常用的有两种解决方法(下列方法都可以在其他博文查看，不再细写，如有需要请自行查询)： 1.给dialog套上v-if ； 2.在关闭dialog时,监听关闭回调,清除校验。 我在自己的项目里使用了上述两种方法，都不太好用，自己琢磨出了另一种方法： <el-dialog @open="openDialog()"> </el-dialog>
element ui 打开弹框表单校验问题
学习记录
06-26 7205
<el-dialog title="编辑" :visible.sync="centerDialogVisible" width="70%" center @close="closeDialog" > <div> <el-form :model="ruleForm2" :rules="r...
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
elewen110的专栏
05-06 3992
在 closed 中先将 form 对象重置为初始值（跟data 中的值相同），然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处（跟其他解决方式相比）是没有任何使用体验上的损失。 <el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" > <el-form :model="dialogForm" :rules="rules" ref="dialogForm"&.
el-form关于rules校验在el-dialog中的使用
m0_61702149的博客
02-03 423
el-form关于rules校验在el-dialog中的使用产生的问题
element中关于二次进入页面后form表单中的rules直接进行校检问题解决方案
weixin_43989837的博客
11-09 1090
问题描述: 进入页面表单中的必选项就被校监了,然后报红. 解决方案: 你可以在生命周期中,以及你的初始化函数中添加下面的代码,让其进入页面不再校监. 取消校验 全部取消：this.$refs.form.clearValidate() 取消指定字段：this.$refs.form.clearValidate(['name']) ...
ElementUI的form关闭再打开弹窗会显示验证提示
LiDeKang1的博客
04-11 1757
如果弹窗时组件形式，则在父组件的点击事件里面加 addTheTop() { this.$refs.form.$refs.toolForm && this.$refs.form.$refs.toolForm.resetFields(); }
el-form验证问题
Zing_ing的博客
01-13 731
el-form 的 model 是 formData，那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 formData.xxx ，即 formData 对象的直接属性。需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。
vue单页面 el-form一打开就校验
future_1_的博客
12-07 1239
vue单页面 el-from一打开就校验
vue在使用饿了么中trigger、el-dialog的用法、校验时所遇到的问题。
m0_73266749的博客
12-13 1644
vue在使用饿了么中trigger、el-dialog的用法、校验时所遇到的问题。
[elementui]form表单先编辑后新建form自动触发校验
qubes的专栏
04-03 1197
element form表单先编辑后新建form自动触发校验。
el-dialog再次打开时重置表单校验
07-08
要在el-dialog再次打开时重置表单校验，你可以使用以下步骤： 1. 在el-dialog的关闭事件中重置表单校验。你可以使用`ref`属性给el-form组件命名，然后在关闭事件中调用该组件的`resetFields`方法来重置校验状态。 例如，给el-form组件添加ref属性： ```html <el-form ref="myForm"> <!-- 表单内容 --> </el-form> ``` 在el-dialog的关闭事件中重置表单校验： ```javascript this.$refs.myForm.resetFields(); ``` 2. 在el-dialog的打开事件中重置表单数据。你可以在打开事件中重置表单的数据，以确保再次打开时表单是空的或重置为初始值。 例如，给el-dialog组件添加打开事件的监听器： ```html <el-dialog @open="handleDialogOpen"> <!-- 对话框内容 --> </el-dialog> ``` 在handleDialogOpen方法中重置表单数据： ```javascript methods: { handleDialogOpen() { // 重置表单数据 this.formData = { // 设置初始值或空值 }; }, }, ``` 通过以上步骤，你可以在el-dialog再次打开时重置表单校验和数据。记得将上述代码根据你的实际情况进行调整。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值