🚀 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
```