Vue中Ant Design表单提交时除最后一项外其余校验卡在Pending状态

问题根因 #

你所有自定义校验函数共用了同一个checkPending定时器变量，全局表单校验会同时触发所有字段的校验逻辑，前一个校验刚创建的定时器会被后一个校验的clearTimeout直接清除，导致除了最后一个执行的校验项之外，其余所有校验的回调函数永远不会被触发，async-validator在校验所有回调返回前会一直处于pending状态，就出现了你看到的卡住问题。

修复方案 #

给每个校验函数单独分配独立的定时器变量，不要共用全局的checkPending，修改后data部分代码如下：

data() {
    // 每个校验函数单独维护自己的防抖定时器
    let checkGitPending, checkModulePending, checkStagePending;
    let checkModuleNumber = (rule, value, callback) => {
      clearTimeout(checkModulePending);
      if (!value) {
        return callback(new Error('Please input the number'));
      }
      checkModulePending = setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('Please input digits'));
        } else {
          if (value < 1) {
            callback(new Error('Module number must at least be 1!'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    let checkGitAddress = (rule, value, callback) => {
      clearTimeout(checkGitPending);
      checkGitPending = setTimeout(() => {
        if (!value.endsWith(".git")) {
          callback(new Error("Please enter clone address that ends with .git!"));
        } else {
          callback();
        }
      }, 1000);
    };
    let checkModuleStage = (rule, value, callback) => {
      clearTimeout(checkStagePending);
      checkStagePending = setTimeout(() => {
        if (value.some((x) => x === "2") && value.some((x) => x === "3")) {
          callback(
            new Error(
              "You have selected both Stage 2 and Stage 3. Only one can be selected:"
            )
          );
        } else {
          callback();
        }
      }, 1000);
    };
    // 剩余原有data逻辑保持不变
}

其余表单、规则、提交方法的代码不需要改动，修改后全局校验就可以正常执行完成。

额外优化提示 #

你当前checkModuleStage的逻辑是判断用户同时选择了Stage2和Stage3，但是原代码的错误提示写成了「同时选择了Stage1和Stage2」，可以同步修正下提示内容，避免用户理解偏差。

内容的提问来源于stack exchange，提问作者demid