iview form清除校验状态的实现
更新时间：2019年09月19日 09:49:42 作者：cason6810
这篇文章主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
有个需求，要求对输入框进行 启用/禁用 的切换，同时在禁用时要清除输入框的校验状态（那个红框）。
方法一：修改 formItem 字段属性
在iview 的官方api 中并没找到清除校验状态的方法，看了下源码，用一个粗糙的方法解决了。
源文件 form-item.vue 中的 resetField方法 是通过修改这两个属性的值清空状态和提示的
其实就是把 formItem 的两个属性值进行了修改，
v.validateDisabled 是否校验
v.validateState 展示状态（校验错误时此处值为 'error'）
v.validateMessage 错误提示文字
修改状态的同时需要把校验规则清掉，否则在提交时还会再次触发校验方法。
方法二：控制 form 渲染
后来在置空校验规则的时候，初始如果没有规则的话，则不会校验（除非去点击提交按钮），然后想到用 v-if 控制 form 的渲染时机，当校验规则发生变化的时候重新渲染，这样就能保证规则和 DOM 是同步的，也不用费力去修改属性
这时就用到了 Promise（真是个好东西），超简单的做了个 callback，每次切换控制按钮都进行这么一套渲染（主要还是代码中调用这个方法的地方太多，懒的去改），也是粗暴的把这个需求对付上了。
后续研究一下，在原基础上增加一个方法专门用来清除状态 ^_^
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在vue中使用公共过滤器filter的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了Vue 匿名、具名和作用域插槽的使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
本篇文章主要介绍了Vue配合iView实现省市二级联动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
一开始我还以为vue的路由只能用在工程化的项目里面,其实不然,下面这篇文章主要给大家介绍了关于前端配合后端实现Vue路由权限的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了巧妙运用v-model实现父子组件传值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了Vue3.0静态文件存放路径与引用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，这篇文章主要介绍了Vue--Router--嵌套路由(children)的用法,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue3框架使用报错以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了如何解决vue2.0下IE浏览器白屏问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
最新评论