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

背景

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

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

方案1: 在一个vue文件中

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

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

缺点

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

方案2:分离组件

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

1. 子组件

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

(1) validate方法

用于验证本身组件的表单项,并返回一个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可以获取它以上所有thenrejectPromise.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时、或者埋怨自己每天在做重复工作时、或者每天对层出不穷的新技术焦头烂额时,不妨认真的审视下自己的项目

  • 每天重复的工作,是不是可以自己造轮子了;
  • 技术栈太low,是不是可以平滑过渡到新技术,提高开发效率;
  • 学再多的新技术,最终也会回归并实践到项目中。

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


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

推荐阅读更多精彩内容