Vue3 + Vuelidate多错误条件下表单错误提示渲染失败问题

你的核心问题是错误地直接访问验证规则对象而非其有效性状态，同时判断逻辑存在顺序错误，导致所有错误提示条件都不匹配，出现空的错误div。

错误原因分析 #

1. Vuelidate中，v.firstName.minLength、v.firstName.alpha是验证规则的对象，而非布尔值，直接用!v.firstName.minLength判断永远为false（对象本身非空）。
2. v.firstName.$error的本质是$dirty && $invalid，当这个值为true时，字段必然已经被触摸（$dirty=true），所以!v.firstName.$dirty的判断永远不会生效。
3. 遗漏了对required规则的错误判断，空值触发的是required错误，但原代码中没有对应分支。

修复后的代码 #

模板部分 #

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" v-model="firstName" @blur="v.firstName.$touch()">
<div v-if="v.firstName.$error" class="error">
  <!-- 优先判断必填错误 -->
  <p v-if="!v.firstName.required.$valid">Please enter your first name.</p>
  <!-- 判断长度错误 -->
  <p v-else-if="!v.firstName.minLength.$valid">First name must be at least 2 characters long.</p>
  <!-- 判断字符类型错误 -->
  <p v-else-if="!v.firstName.alpha.$valid">First name can be characters only.</p>
</div>
  
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" v-model="lastName" @blur="v.lastName.$touch()">
<div v-if="v.lastName.$error" class="error">
  <p v-if="!v.lastName.required.$valid">Please enter your last name.</p>
  <p v-else-if="!v.lastName.minLength.$valid">Last name must be at least 2 characters long.</p>
  <p v-else-if="!v.lastName.alpha.$valid">Last name can be characters only.</p>
</div>

脚本部分（无需修改，保持原代码即可） #

import { required, minLength, alpha } from '@vuelidate/validators';
import useVuelidate from '@vuelidate/core';

export default {
    setup() {
        const v = useVuelidate();
        return { v };
    },
    data() {
        return {
            firstName: '',
            lastName: '',
        };
    },
    validations: {
        firstName: { required, alpha, minLength: minLength(2) },
        lastName: { required, alpha, minLength: minLength(2) },
    },
};

关键修改点 #

• 使用!v.fieldName.ruleName.$valid来判断对应规则是否验证失败，这是Vuelidate中正确的错误状态访问方式。
• 调整判断顺序，优先检查必填错误（空值会同时触发required和minLength错误，优先显示必填提示更合理）。
• 移除无效的!$dirty判断，因为$error已经包含了$dirty为true的条件。

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