Vue 3 Composition API 通过 useValidation 封装表单校验，实现规则定义、状态管理、验证执行与错误同步的集中化；配合 validators 预设规则和 computed 动态规则，深度协同 Element Plus Form，支持跨字段校验与精准错误渲染。
Vue 3 的 Composition API 实现表单校验集中化封装，核心是把“规则定义、状态管理、验证执行、错误同步”从组件中抽离，变成可复用、可配置、可组合的逻辑模块。不靠 mixins，不散落各处，而是用一个函数统一承接。
抽离 useValidation 组合函数
创建 composables/useValidation.js，封装基础校验能力：
- 接收初始值和校验规则数组（每个规则是一个函数，入参为 value 和整个表单值）
- 内部用 ref 管理当前值、错误信息、是否脏（touched）等状态
- 提供 validate() 方法：逐条执行规则，返回第一个错误或空字符串
- 支持手动触发校验，也支持绑定到 input 的
@blur或@input事件
构建规则中心 + 预设校验器
在 validators/index.js 中统一维护常用规则：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 基础规则如
required('用户名')、minLength(6)、maxLength(20) - 正则类规则如
mobile()、email()、idCard()，直接返回 Element Plus 兼容的校验对象 - 支持字段联动，例如
confirmPassword('password')可读取 formValues.password 进行比对
与 Element Plus Form 深度协同
利用 el-form 的 :model 和 :rules 属性，把组合式逻辑注入 UI：
立即学习“前端免费学习笔记（深入）”；
- 在 setup 中调用
useForm(initialValues, rulesConfig)，返回formValues和formRules -
formRules是一个响应式对象，字段名对应 rule 数组，自动适配 el-form-item 的prop - 提交时调用
formRef.validate()，底层仍走 Element Plus 校验流程，但规则来源完全受控于你的规则中心
支持动态规则与跨字段校验
复杂场景下，校验逻辑需响应数据变化：
- 用 computed 包裹规则对象，例如当「是否企业用户」开关开启时，才启用税号校验
- 在自定义 validator 函数中传入
formValues整体，实现「密码与确认密码一致」「开始时间不能晚于结束时间」等依赖关系 - 错误信息可存为对象结构（如
{ username: '已存在', phone: '格式错误' }），便于模板精准渲染
