使用elementUI表单校验函数validate需要注意的坑及解决
更新时间：2024年06月07日 10:37:14 作者：**之火
这篇文章主要介绍了使用elementUI表单校验函数validate需要注意的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用elementUI表单校验函数validate需要注意的坑
elementUI表单校验需要使用到自定义校验规则，官网提供的API函数validate入参就一个回调函数，函数参数是返回校验结果（true/false）和校验字段名称prop,详见elementUI官网。
现在要讲的是自定义校验规则函数，即规则对象中的属性validator。
自定义函数的入参有三个，分别是rule,value和callback；其中rule是返回定义的规则对象，value是当前校验控件的状态值，callback是一个校验结果的回调方法。
直接上图：
图中指出存在的坑
为什么写if(!value)return;这段代码呢，那是因为，当控件如果没有输入任何字符而触发事件时的处理，开始以为直接return就可以了，结果引起校验的其他意想不到的异常！！！！
后面查了相关资料才知道，这个自定义校验函数必须返回一个回调函数“callback”!! 即图中下边的 callback();
返回callback的入参为空代表校验通过规则，返回含new Error（‘自定义提示’）入参代表校验不通过规则。
elementUI表单验证validate
elementUI的form组件里对validate给出的解释是：validate接收一个回调函数，或返回 Promise
通俗点说，validate方法的参数可以是一个回调函数，也可以为空(为空时返回Promise对象,没啥用)
1.参数为回调函数时，该回调函数有两个参数，分别是是否校验成功和未通过校验字段，该回调函数会在校验结束后被调用
表单.validate(回调函数(是否校验成功,未通过校验的字段){
if(是否校验成功){// 校验成功
//成功后的操作
}else{ // 校验失败
// 校验失败后的操作
}
})
//非空校验例子
formRef.value.validate(function (valid, msg) {
if (valid) {
console.log(valid, msg);
//valid值为false
//msg值为对象
a: {message: '该字段不能为空', fieldValue: null, field: 'a'}
} else {
console.log(valid, msg);
//valid值为true
//msg值为一个空对象
}
});总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目实现自定义滑块过渡效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本篇文章主要介绍了Vue-router 类似Vuex实现组件化开发的示例，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍的是Vue组件间的通信方式，本文将系统的介绍了几种不使用Vuex，比较实用的组件间的通信方式，希望能帮助到大家2023-04-04
这篇文章主要介绍了vue表格(table)计算总计方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文介绍了如何通过源码实现对视频实时时长、播放时长和暂停时长的监听,详细阐述了相关技术的应用方法,帮助开发者更好地掌握视频监控技术,提高用户体验2024-10-10
这篇文章主要为大家详细介绍了Vue实现图书管理小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
在本篇文章里小编给大家整理的是关于VUE中表格的写法实例以及相关知识点内容，需要的朋友们可以参考下。2019-08-08
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。2016-10-10
vue使用html2canvas和jspdf将html转成pdf
在前端开发中, html转pdf是最常见的需求,下面这篇文章主要给大家介绍了关于vue如何使用html2canvas和jspdf将html转成pdf的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
最新评论