在 Vue.js 生态系统中，表单验证一直是一个绕不开的核心话题。无论是用户注册、数据提交还是后台管理，表单无处不在。然而，随着表单复杂度的增加，验证逻辑也变得日益繁琐：你需要处理各种规则校验、异步验证、错误信息展示、提交状态管理等。手动实现这些功能不仅代码量庞大，还容易产生 bug。
VeeValidate 正是为解决这一痛点而诞生的。它是 Vue.js 生态中最流行、最成熟的表单验证库之一，完全拥抱 Vue 3 组合式 API，提供了声明式验证、灵活的异步验证、完善的 TypeScript 支持等特性。本文将从 VeeValidate 的核心理念入手，系统全面地介绍其 v4 版本的核心知识点，通过大量代码示例帮助读者掌握这一强大的表单验证工具。
一、VeeValidate 概述
1.1 什么是 VeeValidate
VeeValidate 是 Vue.js 专用的表单验证库，旨在简化表单验证的复杂性。v4 版本完全基于 Vue 3 组合式 API 构建，提供了声明式、可组合、高性能的验证解决方案。
VeeValidate 的核心特性可以概括为以下几点:
1.2 版本与安装
VeeValidate v4 是专为 Vue 3 设计的版本。如果你还在使用 Vue 2，需要安装 v3 版本。本教程基于 v4 版本。
# 安装核心库和预设规则
npm install vee-validate@4 @vee-validate/rules --save
1.3 核心概念:组合式验证
v4 最大的变化是从指令式（v-validate）转向了组合式 API。其核心由两个主要组合式函数构成：
useForm: 创建表单上下文，管理整个表单的状态、验证和提交。
useField: 创建与表单字段绑定的响应式引用，并附加验证规则。
简单来说，useForm 管整体，useField 管个体。这种设计让验证逻辑与 UI 完全解耦，使得代码更加清晰、可复用和可测试。
二、快速上手
2.1 最简示例：useField 的单字段验证
不需要任何插件或全局配置，直接在组件中使用 useField 即可。
<template>
<div>
<!-- 绑定输入框 -->
<input v-model="email" placeholder="请输入邮箱" />
<!-- 显示当前字段的错误信息 -->
<p v-if="errorMessage" style="color: red">{
{ errorMessage }}</p>
</div>
</template>
<script setup>
import { useField } from 'vee-validate'
// 定义校验规则
const validateEmail = (value) => {
if (!value) return '邮箱不能为空'
if (!/^[^\s@]+@([^\s@]+\.)+[^\s@]+$/.test(value)) {
return '邮箱格式不正确'
}
return true // 验证通过
}
// 使用 useField 创建字段上下文
const { value: email, errorMessage } = useField('email', validateEmail)
</script>
这段代码中，useField 返回了 value 和 errorMessage。我们直接将 value 绑定到 v-model，errorMessage 会自动更新错误提示。你不需要手动监听输入事件，也不需要关心何时触发校验，VeeValidate 会在合适的时机自动完成。
2.2 更规范的写法：配合 @vee-validate/rules 使用预设规则
实际项目中，手写规则非常繁琐。@vee-validate/rules 提供了大量常用的内置规则，如 required、email、min、max 等。
全局注册规则（在入口文件 main.js 中一次配置，全局生效）:
// main.js
import { defineRule } from 'vee-validate'
import { required, email, min, max, confirmed } from '@vee-validate/rules'
// 注册规则
defineRule('required', required)
defineRule('email', email)
defineRule('min', min)
defineRule('max', max)
defineRule('confirmed', confirmed)
在组件中使用:
<template>
<div>
<label>邮箱</label>
<input v-model="email" />
<span>{
{ emailError }}</span>
</div>
</template>
<script setup>
import { useField } from 'vee-validate'
// 使用字符串声明规则，简洁明了
const { value: email, errorMessage: emailError } = useField('email', 'required|email')
</script>
2.3 使用 useForm 管理整个表单
useForm 负责处理表单的提交和整体状态，其返回值 handleSubmit 会自动处理验证，只在所有字段验证通过时才执行提交逻辑。
<template>
<form @submit="onSubmit">
<input v-model="email" placeholder="邮箱" />
<span>{
{ emailError }}</span>
<input type="password" v-model="password" placeholder="密码" />
<span>{
{ passwordError }}</span>
<button :disabled="isSubmitting">提交</button>
</form>
</template>
<script setup>
import { useForm, useField } from 'vee-validate'
// 创建表单上下文
const { handleSubmit, isSubmitting } = useForm({
initialValues: { email: '', password: '' } // 初始化表单值
})
// 创建字段
const { value: email, errorMessage: emailError } = useField('email', 'required|email')
const { value: password, errorMessage: passwordError } = useField('password', 'required|min:6')
// 提交逻辑
const onSubmit = handleSubmit((values) => {
alert(`表单提交: ${JSON.stringify(values)}`)
})
</script>
这个示例展示了 VeeValidate 的核心工作流：
useForm 创建表单级上下文
useField 创建字段并关联到同名属性
handleSubmit 接收业务逻辑，在验证通过时自动调用
无需手动调用 validate，框架自动处理
来源：
http://oplhc.cn
