form表单点击取消，rules验证规则不清空

已于 2023-04-23 16:42:43 修改
阅读量947 收藏 5
点赞数 1
分类专栏： vue2 vue 文章标签： vue.js 前端 javascript
于 2022-09-14 18:36:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/future_1_/article/details/126857910
版权

问题：点击添加产品→不输值点击确定→点击取消→再次点击添加产品→上次验证规则未清空

 解决办法：在el-dialog弹窗中加一个 v-if,，其中v-if条件和弹窗的visible.sync的条件相同即可

el-form 规则校验-清空规则校验
Aa12364567的博客
03-15 968
el-form 规则校验-清空规则校验。
【Vue+ElementUI】解决表单校验填写完成仍然有提示
栀妹儿的炼丹炉
02-08 1544
<el-form :rules="rules" ref="addForm" v-model="addForm" label-width="100px"> <el-form-item label="作者：" prop="author"> <el-input v-model="addForm.author"></el-input> </el-form-item> </el-form> addForm:{auth
Vue form表单中 Rules验证 填入值或选择值后 必填消息没有清空的解决
qq_47249564的博客
10-16 4519
自定义rules验证 然后watch监听form表单变化 然后使用this.$refs.form.clearValidate()重新验证 代码如下 <el-form-itemlabel="分类图标"prop="picArr"ref="image"> <MaterialListv-model="picArr"type="image":num="1":width="150":height="150"/> &...
取消form表单里面的按钮的自动提交
qq_44540112的博客
07-08 6300
我从页面上提交数据常用的标签是<form></form>标签,为什么<from>标签能够提交内容呢 ？ 因为<form>标签能够进行自动提交，只需要<form>标签里面有一个<button>标签，那么这个<button>标签就会自动带有提交的方法 <form>标签里面的<inp...
el-form this.$refs[formName].resetFields()校验无效
weixin_45890564的博客
10-27 665
el-form this.$refs[formName].resetFields()校验无效
【element-ui】form表单初始化页面如何取消自动校验rules
小墨鱼的前端问题录
08-02 3855
【代码】【element-ui】form表单初始化页面如何取消自动校验rules。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
通过`:model`和`:rules`属性，我们关联了表单数据和验证规则。每个表单字段都由`el-form-item`组成，它们绑定到`form`对象的相应属性上。当点击“保存”按钮（`saveContact`方法）时，如果数据有效，我们可以进行...
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： :title=titleName...
浅谈vue同一页面中拥有两个表单时,的验证问题
10-18
在Vue应用中，如果一个页面上有两个独立的表单，比如一个用于注册，另一个用于登录，用户可能在填写第一个表单后，发现不符合验证规则，然后立即切换到第二个表单。这时，如果未正确处理，第二个表单可能会显示来自...
使用Vue动态生成form表单的实例代码
08-27
4. 在生成form表单时，可以使用rules参数来指定表单生成规则。rules参数是一个数组，包含多个规则对象，每个规则对象可以指定表单元素的类型、标题、字段名、初始值、验证规则等信息。 5. 在FormCreate中，提供了...
vue elementui 清空表单 不触发验证
kjinwon的博客
06-07 1072
vue
element中rules校验问题，当点击修改之后，关闭页面进行新增，就会出现字段不能为空的情况爆红问题解决
java开发者专栏
08-08 1215
element 中rules校验问题处理
Element的表单验证规则，清空或填充数据如何避免自动触发
热门推荐
年三十的博客
09-25 1万+
前言 使用Element中的form表单检查规则，编辑窗口中填充数据，新建时需清空 需要注意一点： 方法：resetField，不是把表单属性都清空，而是重置为初始值 比如form在加载渲染之前，属性已经被赋值（初始值），所以再次使用resetField不会清空表单数据，而显示初始值 可以理解为重置功能 问题 将表单数据进行清空后，出现表单rules规则自动验证提示 点...
form表单提交时自动清空表单内容
weixin_66196770的博客
09-11 1227
是由于form表单中，button的type属性默认是submit，当type的值是submit时，点击button就会自动刷新。手动设置type字段的值就解决了，即type=“button”.（推荐）此时只要点击提交按钮就会发现表单数据会被直接清空，这是因为form中的button默认为submit，默认会被解读为提交表单，而我这里只是想发个验证码。把button标签换成a标签，这样就可以了；
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
elewen110的专栏
05-06 4229
在 closed 中先将 form 对象重置为初始值（跟data 中的值相同），然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处（跟其他解决方式相比）是没有任何使用体验上的损失。 <el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" > <el-form :model="dialogForm" :rules="rules" ref="dialogForm"&.
element-plus无法清除表单验证
最是人间留不住，朱颜辞镜花辞树。
08-01 1024
还可以给el-dialog设置@open="方法名" .在打开对话框时再清除一次。在打开对话框时，对话框内的表单验证还是存在。
element dialog 关闭 form 表单校验未清除的解决办法
qq_40860137的博客
06-27 1万+
①开发背景:新增XX功能 点击之后 弹出的是el-form表单组成的dialog, 表单新增判空规则, 提交时表单项不合格, 会报错 如下图所示, 只有当表单项合格, this.$refs[formName].validate(asyncvalid=>{}) 中的valid才为true, ②在这种报错前提下, 我们关闭再打开dialog, 会发现报错信息还在。第一种办法(不可行), 在按钮点击的时候调用 this.$refs['accountForm'].resetFields(...
Element Plus 的from表单验证问题--点击取消按钮取消表单验证的blur验证
AiGarry的博客
04-21 3528
对表单中的字段进行验证 <el-dialog :model-value="isShow" top="40px" title="表单" style="margin: 0 auto" @close="isShow= false" > <div style="width: 100%; margin-left: 5%"> <el-form ref="ruleFormRef" :model="
element UI el-dialog校验规则点击取消之后还是会出现提示信息
qq_43870476的博客
05-09 906
1、vue element UI el-dialog 如何监听右上角 x 关闭按钮 <el-dialog :before-close="handleDialogClose"> </el-dialog> methods: { /** * 点击 X 关闭对话框的回调 **/ handleDialogClose() { } } 2、点击弹框“取消”，清除校验规则 html部分: <el-form ref="ruefs"
vue3中通过form的rules属性进行表单验证，在切换组件时调用clearValidate函数清空错误验证提示，不生效
最新发布
10-17
在 Vue3 中，当你使用 `v-model` 和 `form` 的 `rules` 属性来进行表单验证时，验证会在用户交互（如输入、提交等）时自动触发。然而，如果你想要在组件切换时主动清除所有验证状态，比如错误提示，通常的做法是在组件销毁之前调用 `this.$refs.form.clearValidate()` 或者 `this.$refs.form.resetFields()`，这两个方法会清空表单的验证规则结果。 但是，如果这个操作不生效，可能是以下几个原因： 1. 清除验证的动作发生在非生命周期钩子中，例如不是在 `beforeDestroy` 或者 `destroyed` 中调用，因为此时组件实例可能已经不存在了，无法访问到相应的 form 对象。 2. 可能是你使用的 ref 名称不对，确保你引用的是包含 rules 属性的 form 组件的 ref。例如，如果是 `form` 这样的默认命名，应该写成 `this.$refs.form`；如果不是默认命名，检查一下是否正确地设置了 ref，并且名字一致。 3. 如果你在使用自定义的 keep-alive 设置将组件缓存起来，那么需要确保在离开并再次进入组件时手动调用清除验证方法，因为在缓存期间，组件的状态不会改变。 4. 确保在组件实例中设置了正确的 `$refs`，如果没有设置，`$refs` 将是一个空的对象。 要解决这个问题，你可以尝试在组件的适当生命周期钩子中添加清除验证的操作，或者检查代码中的 ref 使用是否正确。以下是修复的示例代码片段： ```javascript // 在 mounted 或 beforeDestroy 生命周期内清空验证 mounted() { this.$refs.form.onFieldChange = () => {}; // 如果有监听事件，先移除 this.$refs.form.clearValidate(); } beforeDestroy() { this.$refs.form.clearValidate(); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值