elementui 复杂 表单验证_vue+elementUI 复杂表单的验证、数据提交方案问题

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

表单项非常多

在各种表单类型下，显示不同的表单项

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

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

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

可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案

方案1： 在一个vue 文件中

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

v-if/v-show

elementui

缺点

乱

乱

还是乱

一个vue 文件，轻轻松松上2000 行

在我尝试加入一种新的表单类型时，我发现我已经无。从。下。手。

方案2：分离组件

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

1. 子组件

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

(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 可以获取它以上所有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和组件代码

总结

以上所述是小编给大家介绍的vue+elementUI 复杂表单的验证、数据提交方案问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！