（一）Element超实用的多表单验证

前言

在web前端开发中，form表单提交数据是我们经常要用到的功能。在表单提交之前，前端这个时候往往会有关于表单的一些字段的验证问题，如必填项，长度，邮箱格式验证等等。通常单一表单的验证，框架API中就有现成的案例参考，这样的例子有很多，这里就不在赘述。今天我们主要讲一下关于多表单验证的实现。这里我们以vue与element实现了一个简单的多表单验证功能案例。

正文

实现多表单验证的功能，本文用到核心的功能是ES6的Promise.all()方法。下面我们直接上代码。代码也可以访问我的开源gitee代码仓库，ATP应用测试平台（atp: 应用测试平台）。

多表单验证

实现的效果如下图所示：

多表单验证实现效果

 后续的流程这里就不在描述了。在表单验证通过之后我们就可以在promise的方法体中实现对多表单数据的提交，后端集中处理提交的多表单数据。提交之后也可以对表单做些取消验证的后续操作。一次性提交多个表单数据，避免分布提交中验证的问题。

结语

好了，本期博客就到这里了，希望能对你有所帮助。