Vue3组合式API：打造可复用表单验证库

Vue3组合式API实现可复用的表单验证逻辑库

在Vue3项目中，表单验证是常见需求。通过组合式API，我们可以创建一个高度可复用的表单验证逻辑库，避免重复代码并提高开发效率。以下是实现步骤：

1. 创建基础验证工具函数

首先，我们需要一个包含常用验证规则的工具函数集合。这些规则将被我们的验证库复用：

• 必填验证：检查字段是否为空
• 邮箱验证：使用正则表达式验证邮箱格式
• 手机号验证：验证中国大陆手机号格式
• 最小长度验证：检查字符串长度是否达标
• 自定义验证：允许传入自定义验证函数

这些函数应返回验证结果对象，包含valid和message字段。

2. 构建核心验证逻辑

使用Vue3的ref和reactive来管理表单数据和验证状态：

• 创建一个验证函数，接收表单数据和验证规则对象
• 遍历每个字段及其对应规则，执行验证
• 使用Promise.all处理所有字段的异步验证
• 返回包含验证结果和错误信息的响应对象

3. 实现响应式验证状态管理

将验证逻辑与UI状态结合：

• 使用watchEffect在表单数据变化时自动触发验证
• 为每个字段维护独立的错误状态
• 提供重置验证状态的方法
• 支持手动触发验证和实时验证两种模式

4. 创建可复用的组合式函数

将验证逻辑封装为可复用的组合式函数：

• 导出useFormValidation函数
• 接收初始表单数据和验证规则作为参数
• 返回包含表单数据、验证方法、错误状态等的对象
• 支持动态添加或修改验证规则

5. 集成到组件中使用

在组件中轻松使用这个验证库：

• 导入useFormValidation组合式函数
• 定义表单数据结构和验证规则
• 在模板中绑定表单数据和错误信息
• 在提交表单时调用验证方法

6. 高级功能扩展

增强验证库的功能：

• 支持异步验证（如检查用户名是否已存在）
• 添加字段级和表单级的验证触发时机控制
• 实现条件验证（如当某个字段满足条件时才验证其他字段）
• 提供验证规则的动态修改能力

7. 优化性能和用户体验

确保验证库高效运行：

• 使用防抖处理实时验证
• 避免不必要的重新渲染
• 提供清晰的错误提示样式
• 支持国际化错误消息

通过以上步骤，我们创建了一个功能完善、高度可复用的表单验证逻辑库。这个库可以轻松集成到任何Vue3项目中，大幅减少重复代码，提高开发效率。开发者只需定义表单结构和验证规则，即可获得完整的表单验证功能，无需从头实现验证逻辑。