vue2-element-dict、vue3-element-dict、vue2-vant-dict、vue3-vant3-dict字典包，vue2-water-marker、vue3-water-marker防篡改的水印插件包，vue-axios-optimize请求优化包，大家有兴趣的可在npm官网搜索了解下，有疑问可咨询小布。
http://www.xiaobusoft.com 爆米花小布官方域名，有兴趣的可查阅。
前言
大家好，我是沈小布，勤能补拙，实践是检验真理的唯一标准是我的座右铭，帮助同行人员少走弯路，提高开发效率，提升代码质量是我的初心。
主题
今天的主题是使用element-ui组件库时，form表单自定义校验方法时一定要注意的事项。
背景
有位信任爆米花小布的粉丝问了个问题，就是一个form表单，点击提交按钮会对表单部分数据进行校验，校验成功才会触发请求，失败则提示错误信息。但是当输入某项数据时且数据符合要求时，点击提交按钮，啥都没反应，也没报错。
下面是粉丝提供的自定义的一个表单JSON字符串校验方法。
const checkJsonstr = (rule, value, callback) => {if (!value) {callback()return}try {const data = JSON.parse(value)if (Object.prototype.toString.call(data) !== "[object Object]") {callback(`请输入正确的额外的JSON字符串`)return}} catch (err) {callback(`请输入正确的额外的JSON字符串`)return}}
下面则是校验成功后请求接口的方法
/** 提交按钮 */submitForm() {this.$refs["dialogFormRef"].validate((valid) => {if (valid) {// 请求接口}})}
有没有细心的朋友能发现上面代码的问题没？
解决
不输入该JSON字符串数据时，点击提交正常请求接口，输入该JSON字符串且不符合规则时，会正常提示错误信息，当输入且符合规则时，表单校验方法不执行了。
如果遇到上述情况，记得一定要检查自定义校验方法校验成功时是否有回调。就像promise方法没有设置resolve()一样。
上述粉丝提供的方法就少了callback()。 因修改为如下图所示代码
多加了一个callback(),就解决问题啦。
总结
这就是使用element-ui组件库时，form表单自定义校验方法时一定要注意的事项，一定要细心！希望对您有所帮助，感谢支持。
写在最后
希望我的文章能够或多或少帮助到大家，如果有点帮助，可分享给更多人，予人玫瑰，手有余香。最后可以的话三连击是对小编写文最大的动力。
公众号：爆米花小布专注分享web前端相关技术文章、工具包、软件工具等，如果喜欢我的分享，给 小布 点一个赞👍 或者 ➕关注都是对我最大的支持。
