Vuelidate排查故障时如何查看所有验证错误信息

安全阿岳

2026-9-25

排查方案

直接在this.$v.$touch()执行后新增校验错误打印逻辑即可，不同Vuelidate版本对应代码如下：

Vuelidate 2.x 版本（带`$errors`内置属性）

async SUBMIT() {
  this.$v.$touch();      
  // 新增错误打印逻辑
  const logErrors = (vInstance, path = '') => {
    if (vInstance.$errors.length) {
      console.log(`错误路径：${path || '根校验节点'}`, vInstance.$errors.map(err => ({
        字段名: err.$propertyPath,
        触发规则: err.$validator,
        错误提示: err.$message,
        字段当前值: err.$model
      })))
    }
    // 递归遍历子字段校验状态
    Object.keys(vInstance).forEach(key => {
      if (!key.startsWith('$') && typeof vInstance[key] === 'object' && vInstance[key]) {
        logErrors(vInstance[key], path ? `${path}.${key}` : key)
      }
    })
  }
  logErrors(this.$v)

  if (this.$v.$invalid) {
    return;
  } 
  // 原有提交逻辑
}

执行后打开浏览器控制台，就能直接看到所有未通过校验的字段、对应规则、当前值，快速定位问题。

Vuelidate 0.x 旧版本

如果是老版本没有$errors属性，用下面的简化逻辑即可：

async SUBMIT() {
  this.$v.$touch();      
  // 打印所有无效字段
  const findInvalid = (v, prefix = '') => {
    Object.keys(v).forEach(k => {
      if (k.startsWith('$')) return
      if (v[k].$invalid) {
        console.log(`无效字段：${prefix}${k}`, v[k])
        findInvalid(v[k], `${prefix}${k}.`)
      }
    })
  }
  findInvalid(this.$v)

  if (this.$v.$invalid) {
    return;
  } 
  // 原有提交逻辑
}