iview form清除校验状态的实现


Posted in Javascript onSeptember 19, 2019

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

方法一:修改 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清除校验状态的实现

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
对layui中table组件工具栏的使用详解
Sep 19 #Javascript
layui自定义工具栏的方法
Sep 19 #Javascript
Node 代理访问的实现
Sep 19 #Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 #Javascript
微信小程序进入广告实现代码实例
Sep 19 #Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 #Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python学习笔记之装饰器
2020/08/06 Python
python使用列表的最佳方案
2020/08/12 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
财务会计专业推荐信
2013/11/30 职场文书
清洁工岗位职责
2014/01/29 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年老干部工作总结
2014/11/21 职场文书
小学中队长竞选稿
2015/11/20 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers