vue+elementUI 复杂表单的验证、数据提交方案问题
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
当我们在做后台管理系统时,经常会遇到非常复杂的表单:
- 表单项非常多
- 在各种表单类型下,显示不同的表单项
- 在某些条件下,某些表单项会关闭验证
- 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。
- 在这种错综复杂的情况下,完成表单的验证和提交
- 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案
方案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 复杂表单的验证、数据提交方案问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:新手如何快速理解js异步编程