vue+elementUI 复杂表单的验证、数据提交方案

时间 2019-11-08

标签 vue+elementui vue elementui 复杂表单验证数据提交方案栏目 HTML 繁體版

原文原文链接

背景

当咱们在作后台管理系统时，常常会遇到很是复杂的表单：html

表单项很是多

在各类表单类型下，显示不一样的表单项

在某些条件下，某些表单项会关闭验证

每一个表单项还会有其余自定义逻辑，好比输入框能够插入模板变量、输入字符数量显示、图片上传并显示、富文本。。。

在这种错综复杂的状况下，完成表单的验证和提交

能够查看具体例子：例子中省略了不少琐碎的功能，只保留总体的复杂表单框架，用于展现解决方案

方案1：在一个`vue`文件中

全部的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一块儿前端

根据表单类型，使用v-if/v-show处理表单项显示隐藏

在elementui自定义验证中，根据表单类型，判断表单项是否验证

根据表单类型，获取不一样的数据，并提交到不一样的接口

其他全部的自定义逻辑

缺点

乱
乱
仍是乱
一个vue文件，轻轻松松上2000行
在我尝试加入一种新的表单类型时，我发现我已经无。从。下。手。

方案2：分离组件

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

1. 子组件

全部的子组件中都须要包含两个方法validate、getData供父组件调用。git

(1) `validate`方法

用于验证自己组件的表单项，并返回一个promise对象github

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

(2) `getData`方法

提供子组件中的数据c#

getData() {
    // 返回子组件的form
    return this.ruleForm;
},
复制代码

2. 父组件

(1) 策略模式

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

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上提issueapp

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

天天重复的工做，是否是能够本身造轮子了；

技术栈太low，是否是能够平滑过渡到新技术，提升开发效率；

学再多的新技术，最终也会回归并实践到项目中。

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

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