如何解决this.$refs.form.validate()不执行的问题
this.$refs.form.validate()不执行问题
问题
使用以下方法获取校验状态的时候,一直获取不到,console没有结果输出
this.$refs.form.validate().then(valid => { console.log(valid) })
原因
①存在没有加入验证规则的 prop
如:在代码中写了很多这样的 prop,作为需要验证的字段:
<FormItem label="URL过滤" prop="groupId">
但是,在定义的 rules 里面没有出现该 prop:
rules: { schemaId: [{ required: true, message: '必填'}], }
注意:一般来讲,多加上 prop 不会有问题,还有可能是自定义的校验有问题
② 自定义校验规则存在没有调用到 callback() 的情况
如:没有验证 value 为空的情况:
const validateFilter = (rule, value, callback) => { if (!value.every(item => HTTPHEADER_KEYWORD_REGEXP.test(item))) { callback(new Error('关键字格式错误:每个最长255字符,不能包含中文')) } else if (value.join('').length > 2048) { callback(new Error('错误:总长度不能超过2048字符')) } else { callback() } }
上述判断中没有考虑到 value 为空的情况也要执行一次 callback(),因此当 value 为空时校验状态也不执行。
const validateFilter = (rule, value, callback) => { if (!value) { callback() } else if (!value.every(item => HTTPHEADER_KEYWORD_REGEXP.test(item))) { callback(new Error('关键字格式错误:每个最长255字符,不能包含中文')) } else if (value.join('').length > 2048) { callback(new Error('错误:总长度不能超过2048字符')) } else { callback() } }
解决思路:
- 根据框架文档,检查代码书写规范
- 打印this.$refs.form.validate(),看状态,如果状态是pedding(待办),还没有执行完成,继续看校验规则问题,是否考虑全面需要执行 callback() 的情况。
this.$refs.form.validate()不起作用
问题描述?
使用该方法获取校验状态的时候,一直获取不到,console没有结果输出
this.$refs.form.validate().then((valid) => { console.log(valid) });
解决方法
去掉没有加入验证规则的prop
什么意思呢?
我在代码中写了很多这样的prop,作为需要校验的字段
<FormItem label="跨网网关" prop="groupId">
但是,在我定义的rules里面没有出现该prop
rules: { schemaId: [{required: true, message: '必填'}], },
解决思路
因为我使用的是ivew框架,所以我会先去ivew官网查看一番,一般一些比较简单的问题,直接翻官网都能得到解决,但是我这种比较无厘头的问题,很明显,我在官网并没有得到什么实质性的收获
上百度,就算不能从前辈或同行那里得到什么实质性的解决,但最少也能开阔一下自己的脑洞。
我就顺带说下我得收获:
确定自定义得规则在最后都进行了callback()回调
可以自己将this.$refs.form.validate()打印出来看看状态
虽然看上去,并没有什么实质性得解决,但是我从中明白了,肯定是我的校验没有完成,二话不多说。
console.log(this.$refs.form.validate())
果不其然啊,我的状态是pedding(待办)状态,还没有执行完成,这个时候又继续排查,确保校验规则没有问题,那么就只能是上面,我自己定义多了prop字段,去掉后,正常呢。
一般来讲多加上prop不会有问题,还有可能是你的自定义的校验有问题(有可能是你的自定义规则里面没有写callback(),检查一下)。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
今天小编就为大家分享一篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09vue中watch监听器用法之deep、immediate、flush
Vue是可以监听到多层级数据改变的,且可以在页面上做出对应展示,下面这篇文章主要给大家介绍了关于vue中watch监听器用法之deep、immediate、flush的相关资料,需要的朋友可以参考下2022-09-09使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
这篇文章主要介绍了使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能,需要的朋友可以参考下2017-11-11el-table 树形数据 tree-props 多层级使用避坑
本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
最新评论