优雅的表单校验

优雅的进行表单校验

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

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

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