Vue3 + TypeScript引入子组件后父页面Vuelidate校验失效问题求助

问题原因 #

你在父子两个组件中同时使用Vuelidate时没有为每个校验实例指定唯一的注册标识，导致两个校验实例互相冲突，子组件的校验规则覆盖/混入了父组件的校验实例，因此引入子组件后父页面的就诊表单校验失效。
从你提供的控制台打印也能验证这点：就诊页的校验实例v1$下存在不属于自身规则的_vuelidate_72子实例，且$silentErrors有5条不属于notes字段的错误，明显是混入了患者注册组件的校验规则。

解决方案 #

第一步：为每个Vuelidate实例指定唯一注册名 #

调用useVuelidate时传入第三个配置参数，通过$registerAs指定当前实例的唯一标识，避免实例冲突：

1. 修改患者注册组件的校验初始化代码

// 原代码
// private v$ = useVuelidate(this.validationRules, this.state);
// 修改为
private v$ = useVuelidate(this.validationRules, this.state, { $registerAs: 'patientFormV' });

2. 修改就诊页的校验初始化代码

// 原代码
// private v1$ = useVuelidate(this.validationRules, this.visitFormState);
// 修改为
private v1$ = useVuelidate(this.validationRules, this.visitFormState, { $registerAs: 'visitFormV' });

第二步：优化校验触发逻辑（建议修改） #

你当前在模板中直接传递!v1$.$invalid作为参数的写法可能出现状态更新不及时的问题，建议改为在提交方法内部手动触发校验：

1. 模板中修改提交事件绑定：

<!-- 原代码 -->
<!-- <form @submit.prevent="saveVisitItem(!v1$.$invalid)"> -->
<!-- 修改为 -->
<form @submit.prevent="saveVisitItem">

2. 修改提交方法逻辑：

async saveVisitItem() {
  this.submitted = true;
  // 手动触发全表单校验
  const isFormValid = await this.v1$.$validate();
  console.log(isFormValid);
  if (isFormValid) {
    // 正常提交逻辑
  }
}

修改完成后两个表单的校验实例会完全独立，不会互相影响，就诊页的校验即可恢复正常。

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