Vuelidate 错误显示不了？原因和 5 个解决方法

vue.js

2024-03-04 12:28:11

Vuelidate 错误显示问题：原因和解决方案

引言

Vuelidate 是一个流行的 Vue.js 验证库，它允许您轻松地对表单数据进行验证。然而，有时您可能会遇到错误未显示在屏幕上的问题。本文将探讨此问题的潜在原因并提供解决方法。

问题原因

未能显示错误的一个常见原因是 Errors 数组未更新。Errors 数组存储着表单验证错误。如果不及时更新此数组，错误将不会显示。

解决方案

解决此问题有几种方法：

1. 使用 $dirty 标记

$dirty 标记指示表单字段是否已更改。使用 $dirty 标记可以强制重新验证字段，从而更新 Errors 数组。

代码示例：

watchEffect(() => {
  if (selectedType.value === "individual") {
    v$ = useVuelidate(individualRules, individual, { $autoDirty: true });
    individual.$dirty = true; // Force re-validation
  } else if (selectedType.value === "company") {
    v$ = useVuelidate(companyRules, company, { $autoDirty: true });
    company.$dirty = true; // Force re-validation
  }
});

2. 使用 $reset 方法

$reset 方法可以重置表单验证状态。通过在切换表单类型后调用 $reset 方法，可以强制重新验证所有字段。

代码示例：

watchEffect(() => {
  if (selectedType.value === "individual") {
    v$ = useVuelidate(individualRules, individual, { $autoDirty: true });
    v$.$reset(); // Reset validation state
  } else if (selectedType.value === "company") {
    v$ = useVuelidate(companyRules, company, { $autoDirty: true });
    v$.$reset(); // Reset validation state
  }
});

3. 手动触发验证

您还可以手动触发对特定字段的验证，而不更改其 $dirty 标记。

代码示例：

watchEffect(() => {
  if (selectedType.value === "individual") {
    v$ = useVuelidate(individualRules, individual, { $autoDirty: true });
    v$.company_confirm_password.$touch(); // Manually trigger validation
  } else if (selectedType.value === "company") {
    v$ = useVuelidate(companyRules, company, { $autoDirty: true });
    v$.company_confirm_password.$touch(); // Manually trigger validation
  }
});