Vue怎么清除Form表单校验信息 您所在的位置:网站首页 js提示信息怎么写 Vue怎么清除Form表单校验信息

Vue怎么清除Form表单校验信息

2023-04-13 17:13| 来源: 网络整理| 查看: 265

Vue怎么清除Form表单校验信息 发布时间:2023-04-13 15:46:43 来源:亿速云 阅读:58 作者:iii 栏目:开发技术

这篇文章主要介绍“Vue怎么清除Form表单校验信息”,在日常操作中,相信很多人在Vue怎么清除Form表单校验信息问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么清除Form表单校验信息”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

问题描述

在Vue项目中使用Form组件进行表单验证,再次打开该表单时,上次的验证提示信息依然存在,业务场景要求再次打开该表单时清除验证提示信息和绑定的数据。

Vue怎么清除Form表单校验信息

解决办法

在控制表单显隐的方法内加入以下代码即可实现:

1.使用Iview中的Form组件:清除表单的验证提示信息与字段值

resetFields() 方法:对整个表单进行重置,将所有字段值重置为空并移除校验结果。

//form指的是绑定到Form组件上的属性ref this.$nextTick(()=>{     this.$refs.form.resetFields(); })

Iview组件库中没有提供clearValidate()方法,不要和Element Ui混淆。

2.使用Element Ui中的Form组件2.1 只清除表单验证提示信息,不清除字段值

clearValidate() 方法:移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果。

//1.清除所有表单项的验证提示信息 this.$nextTick(()=>{     this.$refs.form.clearValidate(); }) //2.清除某一表单项的验证提示信息,如手机号 this.$nextTick(()=>{     this.$refs.form.clearValidate(['phone']); })

注:clearValidate()方法使用清除某一表单项的提示信息时,注意安装的Element Ui版本:Element Ui^2.4.3及后续版本才支持传入参数。

Vue怎么清除Form表单校验信息

2.2 清除表单验证提示信息和字段值

resetFields() 方法:对整个表单进行重置,将所有字段值重置为初始值并移除校验结果。

this.$nextTick(()=>{     this.$refs.form.resetFields(); })注意

想要清除信息的字段必须添加prop属性。prop :对应表单域 model 里的字段

                  

到此,关于“Vue怎么清除Form表单校验信息”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读: 使用vue怎么实现一个转盘抽奖功能 react和vue的区别有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue form 上一篇新闻:电脑错误5x0的80070522未持有所需的权限怎么解决 下一篇新闻:前端vue中怎么实现文件下载 猜你喜欢 Spring的IOC容器有哪些知识点 python中如何实现简单倒计时功能 怎么使用Java实现敏感词过滤功能 怎么用Java做一个吃货联盟订餐系统 python中怎么快速建立web服务 如何使用Java中的Thymeleaf类 python Tkinter怎么用 python设置群控效果的方法是什么 Springboot如何实现微信小程序登录 python如何获取毫秒级时间


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有