element-ui 自定义表单验证 请求后端接口报错 callback is not a function？

在浏览器中打断点发现会执行两次这个函数，第一次验证的时候没有任何问题，正常请求接口，但是不知道为什么会执行第二次。

import { checkCode } from "@/api/sales/globalWares";

var checkCode = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入编码'));
} else {
checkCode({ waresCode: value }).then(res => {
if (res.data > 0) {
callback(new Error('编码重复'));
} else {
callback();
}
});
}
}

rules: {
waresCode: [
{ required: true, validator: checkCode, trigger: 'blur' }
],
shortName: [
{ required: true, message: "商品简称不能为空", trigger: "blur" }
]
},

vue.runtime.esm.js:1888 TypeError: callback is not a function
at checkCode (index.vue?76f2:171)
at Object.checkCode [as validator] (index.vue?76f2:173)
at index.js:216
at next (util.js:114)
at asyncSerialArray (util.js:120)
at util.js:154
at Array.forEach (<anonymous>)
at asyncMap (util.js:151)
at Schema.validate (index.js:141)
at VueComponent.validate (element-ui.common.js:23501)
logError @ vue.runtime.esm.js:1888
globalHandleError @ vue.runtime.esm.js:1879
handleError @ vue.runtime.esm.js:1839
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3882
dispatch @ emitter.js:29
handleBlur @ element-ui.common.js:4811
invokeWithErrorHandling @ vue.runtime.esm.js:1854
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6911

验证部分代码就是这样的，不知道有没有哪位大佬能帮忙解答一下。。。

回答

code.png

没大看懂你这里写的，到底是上面import checkCode，下面又写了个checkCode，还是下面checkCode是上面import checkCode的详细代码。无论是哪种，最后checkCode最后都指向了下面的函数，接收三个参数，第三那个参数是callback，你在checkCode函数里面调用checkCode函数，这里形成了一个循环，这不是重点，重点是里面的函数只传了一个参数，所以第二遍的时候，value和callback都变成了undefined，然后运行callback，抛出错误。

猜测你下面的checkCode和上面的import checkCode不是同一个，然而js没有函数重载，所以下面的函数会覆盖调上面的，所以你需要用不同的名字来区分这两个函数。

导入的函数checkCode和验证用的函数重名，导致他调用到自己，循环调用

以上是 element-ui 自定义表单验证 请求后端接口报错 callback is not a function？ 的全部内容， 来源链接： utcz.com/a/28841.html

回到顶部