iview form清除校验状态

数据摆渡人
• 阅读 5139

有个需求,要求对输入框进行 启用/禁用 的切换,同时在禁用时要清除输入框的校验状态(那个红框)。

方法一:修改 formItem 字段属性

在iview 的官方api 中并没找到清除校验状态的方法,看了下源码,用一个粗糙的方法解决了。

源文件 form-item.vue 中的 resetField方法 是通过修改这两个属性的值清空状态和提示的
iview form清除校验状态

其实就是把 formItem 的两个属性值进行了修改,
v.validateDisabled 是否校验
v.validateState 展示状态(校验错误时此处值为 'error')
v.validateMessage 错误提示文字

iview form清除校验状态
修改状态的同时需要把校验规则清掉,否则在提交时还会再次触发校验方法。

方法二:控制 form 渲染

后来在置空校验规则的时候,初始如果没有规则的话,则不会校验(除非去点击提交按钮),然后想到用 v-if 控制 form 的渲染时机,当校验规则发生变化的时候重新渲染,这样就能保证规则和 DOM 是同步的,也不用费力去修改属性

这时就用到了 Promise(真是个好东西),超简单的做了个 callback,每次切换控制按钮都进行这么一套渲染(主要还是代码中调用这个方法的地方太多,懒的去改),也是粗暴的把这个需求对付上了。
iview form清除校验状态

后续研究一下,在原基础上增加一个方法专门用来清除状态 ^_^

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
CRC32用途及写法
CRC32今天在看rocketmq源码时,看到CRC32,就记录下来以供学习。主要用途: 在远距离数据通信中,为确保高效而无差错地传送数据,必须对数据进行校验即差错控制。循环冗余校验CRC(CyclicRedundancyCheck/Code)是对一个传送数据块进行校验,是一种高效的差错控制方法。if(!checksum(c
Wesley13 Wesley13
3年前
CSS
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过iechromefirefoxopera,需要的朋友可以参考下清除浮动是每一个web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及widthhei
Stella981 Stella981
3年前
Django和elasticsearch搜索引擎网站后端功能实现
一、输入框智能提示(es提供了接口)修改type需要在mapping中设置一个字段suggest:{“type”:“completion”}所以要修改我们定义的type:在type中新增一个字段:suggest,由于esdsl源码有一些问题,所以这样定义是会报错的,要自己定义一个CustomAnalyzer,再声明一个自定义的对
Stella981 Stella981
3年前
ELementUI 树形控件tree 获取子节点同时获取半选择状态的父节点ID
使用elementui tree树形控件的时候,在选择一个子节点后,使用getCheckedKeys后,发现只能返回子节点的ID,但是其父节点ID没有返回。解决办法有三种:1.elementui有一个获取半选择状态值ID得方法  getHalfCheckedKeys  这个方法用来获取父节点半选择状态ID值2.修改源码  找到
Wesley13 Wesley13
3年前
CSS清除浮动大全共8种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过iechromefirefoxopera,需要的朋友可以参考下清除浮动是每一个web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及widthheig
Wesley13 Wesley13
3年前
CSS清除浮动的4种方式
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用
Wesley13 Wesley13
3年前
JAVA程序设计练习题集答案
一、判断题1.String字符串在创建后可以被修改。(0)2.引用一个类的属性或调用其方法,必须以这个类的对象为前缀。(0final类名)3.当调用一个正在进行线程的stop()方法时,该线程便会进入休眠状态。(0)4.如果一个类声明实现一个接口,但没有实现接口中的所有方法,那么这个类必须是abst
清除某条会话的未读消息用engine.clearUnreadCount清除成功 code 是0 的情况下,重新拉取会话,还是未被清除的状态
确认调用清除未读数是否有传入时间戳确认时间戳是否为0,传入时间不可为0确认清除时间是否大于最新时间,不可传入大于当前时间的时间戳确认传入的时间是否大于要被清除的时间的senttime确认传入的时间是否是毫秒单位如果需要传入最新时间可以获取手机时候后根据SD
SpringBoot如何优雅的进行参数校验(一)
SpringBoot如何优雅的进行参数校验一.为什么要进行参数校验在日常的开发过程中,我们常常需要对传入的参数进行校验,比如在web前后端分离项目中,参数校验有两个方面:前端进行参数校验后端进行参数校验那这两种有什么区别呢?只完成一个可不可以呢?答案是不可
位置核验方案
地址位置信息涉及用户隐私,出于法规要求,数据需求方无法通过明文方式与外部数据进行查询和校验,同时数据提供方无法通过数据API接口的方式提供地址校验。本发明的关键技术可以解决上述问题,优化风控规则。