温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何解决vue+elementUI复杂表单的验证、数据提交方案问题

发布时间:2021-08-02 14:31:46 来源:亿速云 阅读:150 作者:小新 栏目:web开发

小编给大家分享一下如何解决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);
 });
},

看完了这篇文章,相信你对“如何解决vue+elementUI复杂表单的验证、数据提交方案问题”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI