优雅的表单校验

优雅的进行表单校验

数据表单校验在我们日常开发中经常要用到,而身为一名前端开发人员你是否还在这样进行数据的校验:

每当我这样进行表单校验时,我都会感觉到浑身不爽,又或者是觉得这样校验数据不优雅

而后端开发中的DTO思想会让我觉得非常舒适,如:

首先定义了一个DTO对象(定义一些校验规则),然后在Controller中需要校验的地方注入了这个对象,所以当一个请求进来时会自动对入参进行校验

这样进行数据校验的优势是,易于扩展,当我们需要变动的时候,只需要关注Rule规则以及传入的校验数据 user,而不会影响到其他地方的代码。

其实,在 ElementUI 中已经实现了这种模式,它就是Form表单校验。

ElementUI中Form校验

在使用ElementUI时我们经常这样进行表单校验:

其实,是在ElementUI Form-item组件内引用了一个数据校验库:async-validator

这个库的使用也非常简单:

原理:首先创建了一个descriptor规则对象,然后实例化一个Schema对象并传入descriptor对象,通过返回的对象实例调用validate方法进行校验并传入需要校验的数据,最后在回调函数中执行校验结果判断

而Form组件只是结合async-validator进行了更深层次的封装,易于我们开发效率,使我们在开发过程中只需关注校验的数据modle以及rules规则。

Form组件对校验的时机做了多种选择:

一种,通过trigger属性传递触发的事件

二中,通过调用validate方法

组件中校验失败的红框提示只是Form-item在校验失败后样式上的更改

这样,我们就能通过async-validator库封装一个优雅的且利于自己开发效率的组件使用了。

如果觉得内容对你有帮助或者有所成长,麻烦请点个小小的赞加收藏,谢谢。 ^o^

相关推荐
GISer_Jing13 小时前
2026年前端AI开发终极指南
前端·人工智能
攀登的牵牛花13 小时前
2026年最危险的,不是不会写代码,而是不会设计 Agent 工作流
前端·agent
LanceJiang13 小时前
设计模式在前端的简易实现与作用
前端·设计模式
代码煮茶14 小时前
Vue3 虚拟列表实战 | 解决长列表性能问题(十万条数据流畅渲染,附原理)
前端·javascript·vue.js
雨季mo浅忆14 小时前
前端如何实现长连接之使用WebSocket长连接
前端·websocket
We་ct14 小时前
LeetCode 201. 数字范围按位与:位运算高效解题指南
开发语言·前端·javascript·算法·leetcode·typescript
Patrick_Wilson14 小时前
你的 MR 超过 500 行了吗?——大型代码合并请求拆分实战指南
前端·代码规范·前端工程化
神三元14 小时前
大模型工具调用输出的 JSON,凭什么能保证不出错?
前端·ai编程
得物技术14 小时前
基于 Cursor Agent 的流水线 AI CR 实践|得物技术
前端·程序员·全栈
计算机学姐14 小时前
基于SpringBoot的宠物店管理系统
java·vue.js·spring boot·后端·spring·java-ee·intellij-idea