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


Posted in Javascript onJune 24, 2019

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

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

方案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 复杂表单的验证、数据提交方案问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
新手如何快速理解js异步编程
Jun 24 #Javascript
简单了解小程序+node梳理登陆流程
Jun 24 #Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 #Javascript
深入了解query和params的使用区别
Jun 24 #Javascript
如何使用JavaScript实现栈与队列
Jun 24 #Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 #Javascript
一次让你了解全部JavaScript的作用域
Jun 24 #Javascript
You might like
php下的权限算法的实现
2007/04/28 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
python实现红包裂变算法
2016/02/16 Python
python读写LMDB文件的方法
2018/07/02 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
中国制造网:Made-in-China.com
2019/10/25 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
新学期校长寄语
2014/01/18 职场文书
企业授权委托书范本
2014/09/22 职场文书
九九重阳节标语
2014/10/07 职场文书
2014年德育工作总结
2014/11/20 职场文书
导游词之河北邯郸
2019/09/12 职场文书