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 相关文章推荐
JavaScript 学习初步 入门教程
Mar 25 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
Javascript var变量删除原理及实现
Aug 26 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
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
php压缩文件夹最新版
2018/07/18 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
js select常用操作控制代码
2010/03/16 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
python实现绘制树枝简单示例
2014/07/24 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
市三好学生主要事迹
2014/01/28 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
自荐信格式模板
2015/03/27 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Mysql排序的特性详情
2021/11/01 MySQL