复杂表单的验证提交解决方案

当我们在做后台管理系统时，经常会遇到非常复杂的表单：

表单项非常多 在各种表单类型下，显示不同的表单项 在某些条件下，某些表单项会关闭验证 每个表单项还会有其他自定义逻辑，比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本。。。 在这种错综复杂的情况下，完成表单的验证和提交 可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案

所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起

根据表单类型，使用v-if/v-show处理表单项显示隐藏 在elementui自定义验证中，根据表单类型，判断表单项是否验证 根据表单类型，获取不同的数据，并提交到不同的接口 其余所有的自定义逻辑

其实很容易想到根据不同的表单类型，分离出多个相应类型的子表单。但我在实践时还是遇到了很多问题：父子表单验证、整体提交数据的获取等等，并总结出一套解决方案：

所有的子组件中都需要包含两个方法validate、getData供父组件调用。

用于验证本身组件的表单项，并返回一个promise对象

vaildate() { // 返回`elementUI`表单验证的结果（为`promise`对象） return this.$refs["ruleForm"].validate(); }, (2) getData方法

提供子组件中的数据

getData() { // 返回子组件的form return this.ruleForm; }, 2. 父组件 (1) 策略模式

使用策略模式存储并获取子表单的ref(用于获取子表单的方法)和提交函数 。省略了大量的if-else判断。

data:{ // type和ref名称的映射 typeRefMap: { 1: "message", 2: "mail", 3: "apppush" }, // type和提交函数的映射。不同类型，接口可能不同 typeSubmitMap: { 1: data => alert(`短信模板创建成功${JSON.stringify(data)}`), 2: data => alert(`邮件模板创建成功${JSON.stringify(data)}`), 3: data => alert(`push模板创建成功${JSON.stringify(data)}`) }, } (2) submit方法

用于父子组件表单验证、获取整体数据、调用当前类型提交函数提交数据

因为elementUI表单验证的validate方法可以返回promise结果，可以利用promise的特性来处理父子表单的验证。 比如then函数可以返回另一个promise对象、catch可以获取它以上所有then的reject、Promise.all。

// 父表单验证通过才会验证子表单，存在先后顺序 submitForm() { const templateType = this.typeRefMap[this.indexForm.type]; this.$refs["indexForm"] .validate() .then(res => { // 父表单验证成功后，验证子表单 return this.$refs[templateType].vaildate(); }) .then(res => { // 全部验证通过 // 获取整体数据 const reqData = { // 获取子组件数据 ...this.$refs[templateType].getData(), ...this.indexForm }; // 获取当前表单类型的提交函数，并提交 this.typeSubmitMap[this.indexForm.type](reqData); }) .catch(err => { console.log(err); }); }, 父表单，子表单一起验证

submitForm1() { const templateType = this.typeRefMap[this.indexForm.type]; const validate1 = this.$refs["indexForm"].validate(); const validate2 = this.$refs[templateType].vaildate(); // 父子表单一起验证 Promise.all([validate1, validate2]) .then(res => { // 都通过时，发送请求 const reqData = { ...this.$refs[templateType].getData(), ...this.indexForm }; this.typeSubmitMap[this.indexForm.type](reqData); }) .catch(err => { console.log(err); }); }, 查看在线项目、项目github和组件代码

总结：很多项目我都遇到这种复杂的表单，也用了很多种解决方案，在此总结出了一种比较整洁简便的方案。当然还有其他很多方案，比如可以把数据提交的方法放在每一个子组件中，公共的表单项数据通过props传递给子组件用于提交。有其他更加简洁的方案，欢迎评论，或者github上提issue

题外话： 看了前端架构师亲述：前端工程师成长之路的 N 问 及 回答中的几个回答后，对我有很大的启发。在对自己的技术方向、前景迷茫时、或者在埋怨自己的项目太low时、或者埋怨自己每天在做重复工作时、或者每天对层出不穷的新技术焦头烂额时，不妨认真的审视下自己的项目，

从工作流程和项目的痛点出发，你会在实践、总结并解决实际问题中进步的更加迅速。

写这篇文章的感受：把这些东西表达出来的难度 >> 文章本身所包含的技术难度