Vue 3 中 VeeValidate 表单校验基于组合式 API 和声明式规则，通过 Form/Field 组件与 useForm/useField 实现响应式验证；需安装 v4.x 版本，全局注册规则并配置中文化及触发时机；支持自定义规则与 Zod/Yup Schema 验证。
Vue 3 中使用 VeeValidate 进行表单校验，核心是组合式 API + 声明式规则。它不依赖模板指令（如 Vue 2 的 v-validate），而是通过 Form 和 Field 组件，配合 useForm、useField 等组合函数实现响应式验证。
安装与基础引入
确保安装的是支持 Vue 3 的 vee-validate v4.x 版本：
- npm install vee-validate@4.x @vee-validate/rules @vee-validate/i18n
- 若需类型安全或复杂 Schema，可额外加装：zod @vee-validate/zod 或 yup @vee-validate/yup
- 在
main.ts中全局注册常用规则并配置行为：
import { defineRule, configure } from 'vee-validate';
import * as rules from '@vee-validate/rules';
import { localize, setLocale } from '@vee-validate/i18n';
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json';
<p>// 注册所有内置规则（如 required、email、min 等）
Object.keys(rules).forEach(rule => defineRule(rule, rules[rule]));</p><p>// 配置中文提示 + 实时校验时机
configure({
generateMessage: localize('zh_CN', zh_CN),
validateOnInput: true,
validateOnBlur: true,
});
在组件中使用 Form + Field
无需手动管理 v-model 和错误状态，VeeValidate 自动绑定字段值与验证结果：
- 用
<form></form>包裹整个表单，它提供errors、isSubmitting等响应式状态 - 每个输入项用
<field name="xxx"></field>替代原生<input>，name是校验键名（必须） - 错误信息可通过
<errormessage name="xxx"></errormessage>直接渲染，或从v-slot解构errors对象
示例片段：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
<template>
<Form @submit="onSubmit" v-slot="{ errors, isSubmitting }">
<div>
<label>邮箱</label>
<Field name="email" type="email" rules="required|email" />
<span class="error">{{ errors.email }}</span>
</div>
<button type="submit" :disabled="isSubmitting">提交</button>
</Form>
</template>
定义自定义验证规则
可在独立文件（如 src/utils/validators.ts）中集中管理，便于复用：
- 调用
defineRule注册新规则，接收字段值，返回true（通过）或字符串（错误提示） - 支持同步和异步逻辑（如用户名是否已存在）
- 推荐用 TypeScript 显式标注参数类型
例如手机号校验：
// src/utils/validators.ts
import { defineRule } from 'vee-validate';
<p>defineRule('mobile', (value: string) => {
if (!value) return '手机号不能为空';
if (!/^1[3-9]\d{9}$/.test(value)) return '请输入正确的手机号';
return true;
});
然后在 main.ts 中导入该文件即可全局生效：import '@/utils/validators'。
进阶：用 Zod 或 Yup 做 Schema 验证
适合中大型项目，提升类型安全与规则复用性：
- Zod 示例：
const schema = object({ email: string().email().min(1), password: string().min(6) }) - 在
<form></form>上通过:validation-schema="schema"绑定 - VeeValidate 自动将 Zod 错误映射为字段级
errors，无需手写每条规则
这种方式让验证逻辑脱离模板，更易测试、维护和跨组件共享。
