Vuetify表单校验仅显示首个未通过规则提示、无法展示所有缺失校验项的问题

问题根因 #

Vuetify默认的表单校验机制会在遇到第一条返回失败结果的规则时，立刻终止后续所有规则的执行流程，不会遍历跑完剩余的校验项，也就无法收集到后面所有未通过规则的错误提示。
比如你输入的密码同时缺数字、缺大写、长度不够时，系统跑到第二条校验规则（检查是否含数字）发现不通过，就会直接中断后面所有检查大写、长度的规则执行，最终只会展示第一条规则的错误提示。

落地解决方法 #

方案1：手动收集全量错误（兼容Vuetify 2/3全版本） #

不依赖组件默认的rules中断逻辑，自己遍历所有校验规则，收集全部未通过的提示，绑定给组件展示：

1. 调整模板的组件配置，移除原有会触发中断逻辑的:rules绑定，新增error-messages和多错误展示配置：

   <v-text-field
    label="New Password"
    class="required"
    v-model="password"
    type="password"
    :error-messages="passwordErrors"
    required
    multi-line-error
   >
   </v-text-field>
   

2. 调整脚本逻辑，把原来的规则数组改成带校验方法的结构化数组，通过计算属性收集所有错误：

   // 定义结构化的密码校验规则
   const passwordRules = [
     { validate: value => /\d/.test(value), message: 'Password must include at least one digit' },
     { validate: value => /[A-Z]/.test(value), message: 'Password must include at least one capital letter' },
     { validate: value => /[^A-Za-z0-9]/.test(value), message: 'Password must include at least one special character' },
     { validate: value => value.length > 8, message: 'Password must be minimum 8 characters' },
   ]
   
   // 计算属性：全量收集未通过的校验提示
   const passwordErrors = computed(() => {
     // 空值场景下，只返回空值提示，跳过后续需要读取字符串属性的规则，避免运行时报错
     if (!password.value) return ['Please enter a password']
     return passwordRules
       .filter(rule => !rule.validate(password.value))
       .map(rule => rule.message)
   })
   

3. 配置说明：
   • multi-line-error属性用来让多条错误提示自动换行展示，不会挤在同一行
   • 遍历规则的时候没有中途中断，会把所有不满足的规则对应的提示全部收集成数组，绑定给error-messages后组件就会把所有提示都展示出来

方案2：Vuetify 3.x 场景下快速适配 #

如果使用的是Vuetify 3.x 版本，可以直接在原有配置基础上调整：

• 给组件添加multi-line-error属性开启多错误展示能力
• 调整原有规则的返回值逻辑，不要让规则返回值触发默认的流程中断，保证所有规则都能被执行完
• 补全空值场景的逻辑判断，避免输入过程中触发无意义的交叉报错

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