优雅的表单校验

优雅的进行表单校验

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

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

而后端开发中的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^

相关推荐
星栈3 分钟前
Dioxus 接数据库最容易写歪的 3 个地方:sqlx + SQLite 怎么接才顺
前端·rust·前端框架
晴虹4 分钟前
vue3-scroll-more:横向滚动条-元素或页签过多滚动显示处理的组件
前端·vue.js
代码搬运媛6 分钟前
Claude 全栈开发专用 Rules 配置
前端
PedroQue9910 分钟前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app
Forever7_10 分钟前
尤雨溪转发:Vue-tui 0.1 发布!Vue 终于杀进终端!
vue.js
逸铭10 分钟前
Day 4:登录与 Token——桌面端怎么存密钥
前端·客户端
默_笙11 分钟前
🍞 我用 CSS 画了一个会转的 3D 立方体,同事以为我学了 Three.js(这节课真的很神奇,我很喜欢)
javascript
dkbnull11 分钟前
Vue 虚拟 DOM Diff 算法与 key 机制原理
vue.js
溯朢16 分钟前
TokUI 流式渲染的 SSE 全链路拆解
前端
京东云开发者18 分钟前
京东 Oxygen xLLM 大模型推理引擎正式捐赠开放原子开源基金会,共建国产 AI Infra 生态
前端