this.$refs.form.validate() 不执行问题的解决办法

问题：

使用以下方法获取校验状态的时候，一直获取不到，console没有结果输出

this.$refs.form.validate().then(valid => {
  console.log(valid)
})

原因：

①存在没有加入验证规则的 prop

如：在代码中写了很多这样的 prop，作为需要验证的字段：

<FormItem label="URL过滤" prop="groupId">

但是，在定义的 rules 里面没有出现该 prop：

rules: {
  schemaId: [{ required: true, message: '必填'}],
}

注意：一般来讲，多加上 prop 不会有问题，还有可能是自定义的校验有问题

②  自定义校验规则存在没有调用到 callback() 的情况

如：没有验证 value 为空的情况：

    const validateFilter = (rule, value, callback) => {
     if (!value.every(item => HTTPHEADER_KEYWORD_REGEXP.test(item))) {
        callback(new Error('关键字格式错误：每个最长255字符，不能包含中文'))
      } else if (value.join('').length > 2048) {
        callback(new Error('错误：总长度不能超过2048字符'))
      } else {
        callback()
      }
    }

上述判断中没有考虑到 value 为空的情况也要执行一次 callback()，因此当 value 为空时校验状态也不执行。

    const validateFilter = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!value.every(item => HTTPHEADER_KEYWORD_REGEXP.test(item))) {
        callback(new Error('关键字格式错误：每个最长255字符，不能包含中文'))
      } else if (value.join('').length > 2048) {
        callback(new Error('错误：总长度不能超过2048字符'))
      } else {
        callback()
      }
    }

解决思路：

• 根据框架文档，检查代码书写规范
• 打印this.$refs.form.validate()，看状态，如果状态是pedding（待办），还没有执行完成，继续看校验规则问题，是否考虑全面需要执行 callback() 的情况。