在使用 Element-UI 进行表单自定义验证时，若验证逻辑中遗漏了 callback() 的调用，会导致 validate 方法中的回调函数无法执行。本文通过数字验证示例，分析因未处理所有分支导致 callback 缺失的问题，并给出修正后的代码方案，确保每个判断路径均正确触发回调。
Element-UI 自定义验证回调未执行问题排查
结论先行。
核心结论：确保 callback 执行
在编写自定义验证规则时，必须确保每一个逻辑分支都执行了 callback()，以保证该函数始终被调用。
问题现象与代码改写
由于需要验证数字类型，参考官网示例代码后发现存在如图所示的 Bug：当输入内容以数字开头且包含字符串时，验证不会报错。鉴于业务逻辑不符，对代码进行了改写。
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
image.png
let checkNumber = (rule, value, callback) => {
if (!value) {
return callback(new Error('预存款不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(Number(value))) {
callback(new Error('请输入数字值'));
}
/*
else {
callback()
}
*/
}, 100);
};错误原因分析
起初直接删除了 else 分支中的所有内容，导致在执行 this.$refs[formName].validate((valid) => {}) 时，内部代码一直未执行。最终发现问题的根源在于自定义验证中每个判断都必须包含 callback()，必须确保 callback() 一定会被执行到。
总结
总结。
以上所述是小编给大家介绍的vue.js element-ui validate中代码不执行问题解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！