【element-ui】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

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

回答：

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

回答：

code.png

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

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

回答：

非常感谢，原因就是这个，自己定义的函数名和引入接口函数名一样了，把名字改了后就好了。又积累了一点经验

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

回到顶部