Vue Composition API 怎么实现表单校验逻辑的集中化封装

小枫同学_9050

小枫同学_9050

2026-10-27

559人浏览

原创

Vue 3 Composition API 通过 useValidation 封装表单校验,实现规则定义、状态管理、验证执行与错误同步的集中化;配合 validators 预设规则和 computed 动态规则,深度协同 Element Plus Form,支持跨字段校验与精准错误渲染。

vue composition api 怎么实现表单校验逻辑的集中化封装

Vue 3 的 Composition API 实现表单校验集中化封装,核心是把“规则定义、状态管理、验证执行、错误同步”从组件中抽离,变成可复用、可配置、可组合的逻辑模块。不靠 mixins,不散落各处,而是用一个函数统一承接。

抽离 useValidation 组合函数

创建 composables/useValidation.js,封装基础校验能力:

  • 接收初始值和校验规则数组(每个规则是一个函数,入参为 value 和整个表单值)
  • 内部用 ref 管理当前值、错误信息、是否脏(touched)等状态
  • 提供 validate() 方法:逐条执行规则,返回第一个错误或空字符串
  • 支持手动触发校验,也支持绑定到 input 的 @blur 或 @input 事件

构建规则中心 + 预设校验器

在 validators/index.js 中统一维护常用规则:

vue-admin-change-reviewer
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: '格式错误' }),便于模板精准渲染

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2683

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5823

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6790

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6518

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

923

5

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

312

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

520

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

371

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

286

29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习