记一次ElementUI el-form validate方法不进回调函数的问题

问题现象

以往使用el-form的validate方法，都能够正常进入回调函数，本次调用却意外出现了无法进入回调函数的问题，代码及问题现象如下图所示：

// 数据保存方法
saveRewardsItemInfoAndContinue() {
    console.log("进入保存方法");
    this.$refs["editForm"].validate(valid => {
      if (valid) {
        console.log("valid: ",valid);
        // 此处业务逻辑省略
      } else {
        this.$message.error("您输入的数据有误,请核对后重试!");
      }
    });
  }

如上方法表单校验无论是否通过都应该打印出

1. 进入保存方法
2. valid: true / valid: false

然而实际现象如下：

控制台只输出了 “进入保存方法”并未输出其他内容，说明el-form validate方法的回调函数并未正常执行

问题排查

1. 因系统有其他类似代码，拉出来比对时发现代码并未写错
2. 谨慎起见，后又参照ElementUI官网进行对比，发现代码却未写错
3. 后发现form表单存在自定义校验规则，代码如下：

const checkMaxScore = (rule, value, callback) => {
      if (value === null || value === undefined) {
        callback(new Error("最高得分不允许为空!"));
      }
      if (value < this.edit.data.minScore) {
        callback(new Error("最高得分不得低于最低得分!"));
      }
    };

参考ElementUI官方自定义校验规则如下：

var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

比对后发现，我所写的代码并非每个分支都调用了callback方法。后在末尾加上callback方法后，问题成功解决，代码及现象如下图：

const checkMaxScore = (rule, value, callback) => {
      if (value === null || value === undefined) {
        callback(new Error("最高得分不允许为空!"));
      }
      if (value < this.edit.data.minScore) {
        callback(new Error("最高得分不得低于最低得分!"));
      }
      // 注意： 自定义校验规则必须保证每个分支都调用了callback方法
      callback();
    };

至此，问题成功解决！

总结

ElementUI el-form组件使用自定义校验规则时，必须保证自定义校验规则的每个分支都调用了callback方法，否则会导致el-form组件的validate方法无法进入回调函数。