Vue setup 组合式 API 如何提取通用的表单校验逻辑函数

将表单校验逻辑封装为以use开头的组合式函数，通过reactive管理字段值与错误信息、ref控制整体有效性，支持单字段校验validateField与全量校验validateAll，内置required/minLength/email/custom等规则，兼容异步校验与TypeScript类型约束。

直接把表单校验逻辑抽成一个以 use 开头的组合式函数，就能在多个组件里复用，不用重复写规则、状态和校验方法。

定义校验规则与错误状态

用 reactive 管理字段值和错误信息，用 ref 控制整体有效性。每个字段对应一个错误消息数组，方便支持多条校验失败提示。

1. 初始数据传入后转为 reactive，保证响应式更新
2. errors 用 reactive<Record<string, string[]>> 类型，字段名作 key，错误消息列表作 value
3. isValid 是 ref<boolean>，实时反映整个表单是否通过校验

封装 validateField 校验单个字段

这个函数接收字段名、当前值、对应规则数组，逐条执行判断，收集错误并更新 isValid 状态。

1. 支持 required、minLength、email、custom 等常见规则类型
2. 每条规则返回布尔值或错误字符串，便于扩展自定义逻辑
3. 校验时清空该字段原有错误，再逐条 push 新错误，避免残留

暴露统一的 validateAll 方法

遍历所有字段，调用 validateField，一次性触发全量校验，适合提交前使用。

1. 可配合 Element Plus 的 el-form 的 validate 方法协同工作
2. 返回 Promise，方便 await 后决定是否提交
3. 内部自动处理异步规则（如远程去重），只需规则函数返回 Promise

搭配 TypeScript 做类型约束

定义 ValidationRule 接口明确规则结构，ValidationRules 是字段到规则数组的映射，让 IDE 能自动补全、编译期报错。

1. 规则 message 字段必填，validator 可选但类型精准（(val: any) => boolean | string）
2. data 和 errors 的类型声明清晰，避免运行时属性访问错误
3. 函数返回值包含 data、errors、isValid、validateField、validateAll，结构稳定易解构