this.$refs.form.validate() 不执行问题的解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 为空时校验状态也不执行。文章来源地址https://www.toymoban.com/news/detail-518196.html

    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()
      }
    }