记一波前端开发的小坑，关于element清空校验缓存

最新推荐文章于 2025-05-14 18:11:20 发布
原创 最新推荐文章于 2025-05-14 18:11:20 发布 · 844 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue中重置表单的有效方法，通过调用特定的API，可以轻松清除验证信息，实现表单的初始化。此技巧对于开发人员在处理用户取消操作时非常实用。

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

原代码
需要实现点击取消按钮，将原来的验证信息给清除掉的操作
这个时候需要在重置方法中，添加一句
vm.$refs[‘userForm’].resetFields();
vm是指向vue实例，而不能使用this，userForm是最外层的表单
添加后便可实现功能

前端面试汇总-React
构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！
06-29 1379
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
Google guava第一讲：guava缓存实战/使用场景/缓存清理/最佳实践/caffeine实战
Jet_qi的博客
04-15 5716
Guava缓存实战及使用场景 摘要：本文先介绍了Guava Cache囊括的基本使用方法，然后结合体系类图和LocalCache的数据结构对典型的几个方法源码进行流程分析。重点 缓存的命中率，缓存的失效时间，缓存的OOM，缓存的统计数据等。 文章目录Guava缓存实战及使用场景1 为什么使用本地缓存1.1 适用场景2 如何使用Guava缓存(缓存容量/超时时间/移除监听器/缓存加载器)2.1 ......
vue + ElementUI 关闭对话框清空验证，清除form表单
weixin_33770878的博客
08-23 1720
前面跟大家提到过 elementUI验证的问题，那么今天就来看看 点击对话框和关闭按钮 怎么清空验证，清空form表单，避免二次点击还会有 验证错误的提示 1、首先在你的对话框 取消按钮 加一个click事件，例如：（ps:：callOf里面的addGroupData和ref一 一对应起来） <div slot="footer" class="dialog-footer"> ...
element-ui表单清除校验
最新发布
weixin_39419463的博客
05-14 569
使用clearValidate和resetfields这两个方法，选哪一个看场景。
elementUI清空表单校验及清空表单内容信息
qq_63026743的博客
12-21 3169
通过调用对整个表单进行重置，将所有字段值重置为初始值并移除校验结果调用移除表单项的校验结果。
elementUI中表单校验的清空校验以及手动校验
qq_20086467的博客
01-31 2330
this.$refs.表单.clearValidate(),这个可以传入字符串或者字符串数组，字符串对应的是我们自定义的rule里面的属性名，rule的属性名对应的是el-form-item的prop。这个api目前遇到的场景是el-radio切换时v-if展示不同的表单内容，但是当有校验提示的时候会被带到不该在的地方。如上所示，这里就可以用clearValidate来清空提示文字。
Vue-element 组件dialog右上角点击 X 清空表单校验信息
林夕
07-01 733
Vue-element 组件dialog右上角点击 X 清空表单校验信息
前端知识宝典
qq_37759901的博客
01-29 1687
搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）
springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目（笔记,帮填坑）
web15870359587的博客
03-01 588
根据B站up主MarkerHub视频制作的一个笔记 我的博客 B站博主链接： https://www.bilibili.com/video/BV1PQ4y1P7hZ?p=1 博主的开发文档: https://juejin.cn/post/6844903823966732302 部署视频 https://www.bilibili.com/video/BV17A411E7aE?p=1 up主的部署文档 https://juejin.im/post/6886061338804617229/ 开源项目源码 : up
elementUI 清空表单
qq5678574的博客
02-07 916
想在点击取消新建和确定新建的时候都清空表单，不想让下次新建的时候还带着上一次的填的。 要给带ref属性，并在每一个里面的表单项加prop属性。 $refs里面的名字和上面定义的ref名字统一。 ...
清除表单缓存数据
weixin_45060105的博客
04-27 665
清除缓存数据， 1、试过element ui自带的this.$refs['TagsForm'].resetFields()清除表单缓存，但是不行， 2、最后在方法里给表单传空对像就可以实现的了
vue清除html缓存,组件切换时vue可以清除css缓存吗？
weixin_36272673的博客
06-22 662
vue项目开发中使用了element-ui组件，在使用自定义表格部分需要自己编写样式，在编写的时候通过在外部定义一份css文件，然后在A组件中引入，在A组件中是可以的，通过@import '' 方式引入的，在打开B组件时，因为在A 组价在vue项目的开发中使用了元素-ui组件。使用自定义表格时，您需要编写自己的样式。编写时，您可以在外部定义一个css文件，然后将其引入组件，可以通过@import ...
elementUi中表单验证清空
qq_45155769的博客
06-14 2206
elementUi中表单验证清空
element下拉框/级联选择器弹窗校验相关问题记录
qq_54089372的博客
03-30 1657
element下拉框/级联选择器弹窗校验相关
element关闭弹窗清除表单验证的方法
热门推荐
前端精髓
04-23 1万+
<template> <div> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @closed="handleClose"> <el-form :model="ruleForm" ...
Vue清空子组件数据问题
Alnaschar的博客
11-16 3311
在父组件中使用子组件中所提供的数据，在触发事件后，要求清空子组件所遗留的数据
element清除表单校验
weixin_46021847的博客
10-19 1569
//关闭表单时调用次方法 this.$refs[formName].resetFields();
element-ui的表单验证如何清除校验提示语
爱代码的小海的博客
11-09 1万+
问题场景： 最近在进行项目开发的时候，遇到了这样的一个问题： 对表单域中的数据进行校验的时候，其中有一项比较特殊，不是简单的输入框，下拉框这些表单元素，而是自己写的一个el-table的选择弹窗，我对它的校验如如下： protocolId: [ { required: true, message: '请选择解析协议', trigger: 'blur'}, ], 这样可以实现校验功能，但是会存在一个问题，如果触发的了校验条件（提交按钮），提示了错误信息，后续即使重新选择了数据，错误信息依旧会存在
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值