位置: IT常识 - 正文

Vue 清除Form表单校验信息 清除表单验证上次提示信息(vue清空form数据再重新赋值)

编辑:rootadmin
Vue 清除Form表单校验信息 清除表单验证上次提示信息 问题描述

推荐整理分享Vue 清除Form表单校验信息 清除表单验证上次提示信息(vue清空form数据再重新赋值),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue清空form数据再重新赋值,vue $ref内容清空,vue表格一键清空,vue实现删除,vue删除dom,vue清空form数据再重新赋值,vue清空form数据再重新赋值,vue清空form表单,内容如对您有帮助,希望把文章链接给更多的朋友!

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

解决办法

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

1.使用Iview中的Form组件:清除表单的验证提示信息与字段值Vue 清除Form表单校验信息 清除表单验证上次提示信息(vue清空form数据再重新赋值)

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

//form指的是绑定到Form组件上的属性refthis.$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及后续版本才支持传入参数。

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

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

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

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

<FormItem label="Name" prop="name"> <Input v-model="formValidate.name" placeholder="输入您的姓名"></Input> </FormItem>
本文链接地址:https://www.jiuchutong.com/zhishi/297702.html 转载请保留说明!

上一篇:使用Vue+Vue-router+el-menu实现菜单功能实战(使用二氧化碳灭火器时人应该站在什么位置)

下一篇:YOLOv5-v6.0学习笔记(yolov5m)

  • 安装服务费税率是多少
  • 公司申请破产后股东需要还债吗
  • 去年的亏损今年第一季度可以弥补吗
  • 应收款和应付款对抵
  • 餐饮业税负上升有什么原因
  • 费用会计具体工作总结
  • 外商投资企业如何注资
  • 餐厅团购券在哪个软件的
  • 股息交个人所得税怎么交
  • 差旅费报销会计科目
  • 公司收到银行承兑汇票怎么做分录
  • 补交税金怎么做账
  • 影视公司招演员
  • 伤亡保险是什么意思
  • 月工资和账户工资区别
  • 以前年度损益调整贷方余额表示什么
  • 职工教育经费是多少
  • 初级会计备课指点
  • 领备用金时会计怎么做账
  • 工程储备的材料是存货吗
  • 固定资产折旧怎么做记账凭证
  • 日工资计算的三种方法
  • windows11开始菜单点击没反应
  • 广告制作费属于劳务还是服务
  • 物流货损怎样处理
  • 王者荣耀电脑版怎么键盘操作
  • windows7如何格式化恢复出厂设置
  • 主营业务收入明细账
  • pc是什么文件
  • 公网访问内网主机
  • php autoloader
  • PHP:imagesetstyle()的用法_GD库图像处理函数
  • 结转已销产品实收成本
  • tensorflow dlib
  • 更改税种需要哪些资料
  • 布莱顿小镇介绍
  • thinkphp案例
  • typescript some
  • 数量金额式账页图片
  • 所有者权益变动表模板excel
  • 股东以房产投资公司
  • 收到电子银行承兑汇票计入什么科目
  • golang eventbus
  • vue多平台
  • python异常值处理方法
  • python调试器是什么
  • 公司采购不含税产品合法吗
  • 政府返还的个税手续费会计分录
  • sql server row_number over
  • 职工福利费的比例
  • 用于不动产的进项税额
  • 红酒礼品盒批发
  • 汇票本票支票的联系
  • 银行汇票如何兑现金
  • sql server减法
  • mysql@变量
  • 5分钟了解环保币gec
  • 创建mysql数据库指定字符集
  • xp系统安装惠普1010教程
  • FreeBSD 6.2-RELEASE下载
  • win10系统崩溃后可以通过什么来恢复
  • windowssystem32configsystem 损坏
  • linux如何设置用户自己的工作环境
  • windows 10预览版
  • perl中的$_
  • jquery简单例子
  • Jquery uploadify上传插件使用详解
  • python获取文件内所有函数
  • python嵌套语句
  • js类的实现
  • 鼠标瞬间移动
  • javascript 性能
  • android fragmentactivity
  • jquery解析html文本
  • 江苏国家电子税务局新版本怎么申领发票
  • 完税证明可以自己在家打印吗
  • 网上报税失败怎么办
  • 广汽传祺gs52013款2.0自动怎么样
  • 表彰税务工作者们的活动策划
  • 金水区地税局办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设