Vee-Validate & Yup：如何显示多个验证错误而非单个错误信息

要实现输入框下方显示多条验证错误，核心是获取字段的所有错误数组并遍历渲染——Vee-Validate 默认会收集字段的全部校验错误，只是默认展示逻辑通常只取第一条，以下是具体实现步骤：

1. 定义包含多规则的 Yup 校验 Schema #

先给字段设置多个校验规则，每个规则对应一条错误提示：

import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string()
    .required('邮箱不能为空')
    .email('请输入有效的邮箱格式')
    .min(6, '邮箱长度不能少于6个字符'),
  password: Yup.string()
    .required('密码不能为空')
    .min(8, '密码长度不能少于8位')
    .matches(/[A-Z]/, '密码必须包含至少一个大写字母'),
});

2. 在组件中获取字段错误数组并渲染 #

通过 useForm 返回的 fields 对象，或者 ErrorMessage 组件的插槽，都能拿到字段的所有错误：

方式一：直接使用 fields 对象遍历 #

<template>
  <form @submit="handleSubmit(onSubmit)">
    <!-- 邮箱输入框 -->
    <div class="form-group">
      <label>邮箱</label>
      <input 
        type="email" 
        v-model="values.email" 
        v-bind="fields.email.attrs"
      />
      <!-- 遍历显示所有错误 -->
      <div class="error-list">
        <span v-for="(err, idx) in fields.email.errors" :key="idx" class="error">
          {{ err }}
        </span>
      </div>
    </div>

    <!-- 密码输入框 -->
    <div class="form-group">
      <label>密码</label>
      <input 
        type="password" 
        v-model="values.password" 
        v-bind="fields.password.attrs"
      />
      <div class="error-list">
        <span v-for="(err, idx) in fields.password.errors" :key="idx" class="error">
          {{ err }}
        </span>
      </div>
    </div>

    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { useForm, defineField } from 'vee-validate';
import * as Yup from 'yup';

// 定义校验规则
const validationSchema = Yup.object({
  email: Yup.string()
    .required('邮箱不能为空')
    .email('请输入有效的邮箱格式')
    .min(6, '邮箱长度不能少于6个字符'),
  password: Yup.string()
    .required('密码不能为空')
    .min(8, '密码长度不能少于8位')
    .matches(/[A-Z]/, '密码必须包含至少一个大写字母'),
});

// 初始化表单
const { values, fields, handleSubmit } = useForm({
  validationSchema,
  mode: 'input', // 输入时实时校验
});

// 绑定字段（用于获取字段状态，如 touched/dirty）
defineField('email');
defineField('password');

// 提交处理
const onSubmit = (formValues) => {
  console.log('表单数据:', formValues);
};
</script>

<style scoped>
.form-group {
  margin-bottom: 16px;
}
.error-list {
  margin-top: 4px;
}
.error {
  display: block;
  color: #ef4444;
  font-size: 14px;
  margin: 2px 0;
}
</style>

方式二：使用 ErrorMessage 组件插槽 #

如果习惯用 ErrorMessage 组件，可通过它的插槽直接获取错误数组：

<ErrorMessage name="email" v-slot="{ errors }">
  <div class="error-list">
    <span v-for="(err, idx) in errors" :key="idx" class="error">{{ err }}</span>
  </div>
</ErrorMessage>

关键说明 #

• defineField 主要用于绑定字段的状态（如是否已触摸、是否已修改），但获取错误不需要依赖它，直接通过 fields 或 ErrorMessage 插槽即可拿到所有错误。
• 配置 mode: 'input' 可实现输入时实时校验并显示错误，也可根据需求改为 blur（失焦时校验）或 submit（提交时校验）。

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