如何解决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(),检查一下）。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue 动态添加/删除dom元素,需要在点击添加时，增加一行key/value的输入框；点击垃圾桶图标时，删除对应行，本文结合实例代码给大家讲解的非常详细，需要的朋友可以参考下2022-12-12
web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答
这篇文章主要介绍了web面试中常问问题，MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答，有需要的朋友可以借鉴参考下，希望能够有所帮助2021-09-09
本篇文章主要介绍了Vue.js源码之事件机制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue element 中的table动态渲染实现（动态表头）
这篇文章主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
本文主要介绍了Vue不能监听(watch)数组变化的解决方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue3中实现音频播放器APlayer的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
今天小编就为大家分享一篇vue根据进入的路由进行原路返回的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
mpvue中配置vuex并持久化到本地Storage图文教程解析
这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题
这篇文章主要介绍了vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论