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

2020-07-26 05:07:15 执剑追风 56 前端开发 / VUE

复杂表单该如设计验证、表单数据提取等解决思路

将复杂的表单进行分离成子组件:


根据不同的表单类型,分离出多个相应类型的子表单,但是分离之后会遇到子表单的验证问题:父子表单验证、整体提交数据的获取等。


现总结出一套优雅的解决方案:

1、子组件

所有的子组件中必须写两个方法validateForm(验证子组件表单自己)、getData(向父件件返回表单数据、供父组件调用)

validateForm(){

//返回表单的验证结果(为promise对象)

return this.$refs['form'].validate();

},


getData(){

//返回子组件的form数据

return this.formData;

}


2、父组件

(1)策略模式:使用策略模式存储并获取子表单的ref(用于获取子表单的方法)和提交函数。可以省略大量IF判断,使代码更优雅便于维护。

data:{

//type和ref 名称的映射

typeRefMap:{

1: "message",

2: "maill",

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);

})

}


//父子表单一起验证

submitForm(){

const templateType = this.typeRefMap[this.indexForm.type];

const validate1 = this.$refs['indexForm'].validate();

const validate2 = this.$refs['templateType'].validate();


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);

})

}