Vee-validate
Vue 生态最流行的表单库,由 Abdelrahman Awad 维护。它只负责"表单状态与校验"——不提供 UI 控件,而是把字段值收集、错误聚合、提交流转、reset/dirty/touched 等抽象成可组合 API,让你自由搭配 Yup / Zod / Valibot 等任意 schema 库与 Element Plus、Naive UI、Vuetify 等任意组件库。
评价
优点
- Composition API(
useForm/useField/useFieldArray)类型完整,与<script setup>集成顺畅,schema 还能反向推导出values类型 - 解耦彻底——既支持声明式组件(
<Form>/<Field>/<ErrorMessage>),也支持纯 hooks;同一项目可混用 - 通过
@vee-validate/yup/@vee-validate/zod/@vee-validate/valibot的toTypedSchema适配主流 schema 库,校验逻辑不再绑死 @vee-validate/i18n配套 40+ 语言包,错误消息本地化开箱即用;devtools插件可直接在 Vue Devtools 中调试表单状态useFieldArray原生支持动态字段(push/remove/swap/move),动态表单不用自己写状态机
缺点
- API 表面积大,
useForm返回近 30 个方法,新手面对defineField/defineComponentBinds/Field三套绑定方式容易选错 - 默认行为偏激进:所有字段在
submit前blur即触发校验,需要手动用validateOnBlur=false或meta.touched控制时机 - v3 → v4 是 breaking change,旧文档与代码片段仍大量充斥网络,搜索时需注意版本
- Zod 的
refine/superRefine在某些键缺失时不执行(Zod 本身的设计),与表单"草稿态"配合时偶尔需要绕路
总体来说在 Vue 生态里它依然是表单库的最佳选择,复杂表单尤其值得用。