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() 的情况。