Vue 3 表单验证组合式 API，提供类似 Ant Design Vue Form 的强大表单验证功能

Vue Form Validator

🚀 Vue 3 表单验证组合式 API，提供类似 Ant Design Vue Form 的强大表单验证功能

[npm 仓库](https://link.juejin.cn?target= "")\]([www.npmjs.com/package/@ea...](https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40easily-js%2Fvue-form-validator "https://www.npmjs.com/package/@easily-js/vue-form-validator")) ### ✨ 特性 * 🎯 **Vue 3 优化**: 基于 Composition API 构建，完全支持响应式 * 🔧 **TypeScript 支持**: 完整的类型定义，享受类型安全和智能提示 * 🌊 **灵活验证**: 支持单字段、多字段、整表单验证 * 🏗️ **深度规则**: 支持嵌套对象和数组的复杂验证场景 * ⚡ **防抖优化**: 可配置的防抖验证，提升用户体验 * 🧪 **开发工具**: 内置性能监控和规则验证工具 * 📦 **轻量无依赖**: 基于 async-validator，体积小巧 * 🔄 **兼容 Element Plus** : 无缝集成 `el-form-item` 组件 #### 解决 Element Plus 表单验证的痛点 Element Plus 的表单验证虽然功能完善，但在现代 Vue 3 开发中存在一些局限性： ##### 🔗 **组件耦合度高** ```vue ``` ##### 📱 **Composition API 支持有限** ```typescript // Element Plus：需要通过 ref 获取表单实例 const formRef = ref() const validate = () => formRef.value.validate() // Vue Form Validator：纯 Composition API 体验 const { validate } = useForm(model, rules) await validate() // 直接调用 ``` ##### 🌊 **深度验证困难** ```typescript // Element Plus：嵌套验证配置复杂 const rules = { 'user.profile.name': [{ required: true }], // 不够直观 } // Vue Form Validator：原生深度验证支持 const rules = { 'user.profile': { type: 'object', fields: { name: { required: true, message: '请输入姓名' }, contacts: { type: 'array', defaultField: { /* 数组元素验证规则 */ }, }, }, }, } ``` #### 🚀 Vue Form Validator 的技术优势 ##### 1. **智能响应式验证状态** ```typescript // 验证状态自动响应式更新，无需手动管理 interface UseFormValidateInfo { required?: boolean // 自动检测是否必填 validateStatus?: 'error' | 'validating' | 'success' | '' error?: string // 错误信息 } ``` ##### 2. **高性能懒加载机制** * 使用 Proxy 实现深度字段的懒加载 * 只有在访问时才创建对应的验证规则和监听器 * 智能内存管理，自动清理不需要的资源 ##### 3. **内置防抖优化** ```typescript const { validationState } = useForm(model, rules, { debounceMs: 300, // 用户停止输入 300ms 后才验证 }) ``` ##### 4. **完整的 TypeScript 支持** ```typescript interface UserForm { username: string email: string } // 完整的类型推导和约束 const { validationState } = useForm(model, rules) // validationState.username ✅ 类型安全 // validationState.nonexistent ❌ TypeScript 错误 ``` #### 📊 性能对比 | 特性 | Vue Form Validator | Element Plus Form | |----------------|--------------------------|-------------------| | **响应式更新** | 🟢 精确更新，只更新变化的字段 | 🟡 可能触发整个表单重新渲染 | | **内存使用** | 🟢 懒加载 + 自动清理 | 🟡 需要手动管理 | | **验证频率** | 🟢 内置防抖，可配置 | 🟡 需要手动实现 | | **深度验证** | 🟢 原生支持，性能优化 | 🔴 复杂场景性能差 | | **TypeScript** | 🟢 完整类型推导 | 🟡 基础类型支持 | | **组合式 API** | 🟢 专为 Composition API 设计 | 🟡 混合支持 | ### 📦 安装 ```bash # npm npm install @easily-js/vue-form-validator async-validator # yarn yarn add @easily-js/vue-form-validator async-validator # pnpm pnpm add @easily-js/vue-form-validator async-validator ``` ### 🚀 快速开始 #### 基础用法 ```vue ``` #### 高级用法 ##### 1. 防抖验证 ```vue ``` ##### 2. 深度规则验证 ```vue ``` ##### 3. 数组验证 ```vue ``` ##### 4. 自定义验证器 ```vue ```