如何避免Vuelidate嵌套验证干扰父级表单验证？

问题核心 #

当前的问题是：模态1的下一步按钮依赖$v.wizard.units.$invalid判断禁用状态，但这个属性会递归包含所有嵌套字段（比如模态2的taxes）的验证结果。因为模态2未填写时taxes验证失败，导致模态1的按钮直接被禁用，无法进入下一个模态。

解决方案思路 #

要实现仅验证当前模态对应层级的规则，忽略嵌套字段验证直到进入对应模态，核心是：

• 模态1的验证只检查units的父级规则（required、minLength），不包含嵌套的taxes规则
• 进入模态2后，再启用并触发taxes字段的验证

具体实现代码 #

1. 修改模态1的按钮禁用判断 #

替换直接使用$v.wizard.units.$invalid的方式，改用自定义计算属性仅检查父级规则：

<!-- 模态1的下一步按钮 -->
<button @click.prevent="nextToModal2" :disabled="isModal1Invalid">下一步</button>

2. 定义验证状态计算属性 #

在组件的computed中添加自定义判断逻辑，只校验units的父级验证规则：

computed: {
  isModal1Invalid() {
    const units = this.$v.wizard.units;
    // 触发父级规则的验证（确保已执行校验）
    units.$touch();
    // 仅判断父级规则的错误，忽略嵌套的taxes验证
    return units.required.$error || units.minLength.$error;
  }
}

3. 切换模态时启用嵌套字段验证 #

在进入模态2的方法中，触发taxes字段的验证监听，确保模态2的规则生效：

methods: {
  nextToModal2() {
    // 确认模态1验证通过后切换模态
    if (!this.isModal1Invalid) {
      this.currentModal = 2;
      // 进入模态2后，触发所有taxes字段的验证
      this.$v.wizard.units.$each.forEach(unit => {
        unit.taxes.$touch();
      });
    }
  }
}

4. 可选：动态控制嵌套规则的生效时机 #

如果需要更灵活的规则控制，可以直接在验证规则中根据当前模态动态判断：

validations: {
  wizard: {
    units: {
      $each: {
        taxes: {
          required: value => {
            // 仅在模态2时才校验taxes的必填项
            return this.currentModal !== 2 || !!value;
          }
        }
      },
      required,
      minLength: 1
    }
  }
}

关键原理说明 #

Vuelidate的$invalid属性会递归包含所有子节点的验证结果，而$error属性仅对应当前字段的规则结果。通过直接判断父级规则的$error，可以避免嵌套字段的验证影响当前模态的按钮状态。

内容的提问来源于stack exchange，提问作者Maflec