页面中有多个表单需要验证,可以使用以下方法:

export default {
data: {
return {
addOrEditVo: {
name: '',
description: '',
aliasName: '',
params: []
},
formArr: ['basicForm', 'infoForm', 'otherForm'], // 注意: formArr中length与rejectObj的length一致
resultArr: [],
rejectObj: [
'基本信息不合规',
'描述信息不合规',
'其他信息不能为空'
]
}
},
method: {
reform(formName, err) {
const that = this
const result = new Promise((resolve, reject) => {
that.$refs[formName].validate((valid) => {
if(valid) {
// 一定要resolve(),不然不会执行Promise.all中的then或catch内容
resolve(0)
} else {
// 弹出错误提示信息
reject(err)
}
})
})
that.resultArr.push(result)
},
saveInfo() {
//保存方法
},
clickSubmit() {
// 每次提交前都重置
this.resultArr = []
this.formArr.forEach((item, index) => {
this.reform(item, this.rejectObj[index])
})
let that = this
Promise.all(this.resultArr).then(() => {
console.log('表单验证通过')
that.saveInfo()
}).catch((data) => {
console.log('表单验证失败')
that.$message.error(data)
})
}
}
}

最新文章

  1. ES6新特性概览
  2. MVC 问答
  3. 记录HttpWebRequest辅助类
  4. C++ WIN32控制台异常关闭回调函数
  5. Invoke BeginInvoke
  6. for循环,列表和格式化输出
  7. 50一个Android开发技巧(01 利用好layout_weight属性)
  8. web中国的数据分析过程
  9. java遍历Set集合
  10. 结构-行为-样式-Js函数节流
  11. 最新webstorm
  12. LVM学习笔记
  13. js 对日期处理
  14. python 函数定义及调用
  15. 网站优化URL需要注意的几个细节
  16. Java虚拟机 - 类初始化
  17. 三、oracle 用户管理一
  18. java编程常用的快捷键
  19. img底边空隙问题原因和解决方案(修改)
  20. 图解Eclipse或者SpringSource Tool Suite 创建模块化Maven项目

热门文章

  1. error Unnecessary return statement no-useless-return
  2. div 拖动 js实现
  3. android audiorecord初始化失败相关资料收集
  4. 架构的生态系 资讯环境被如何设计至今.PDF
  5. Firefox彻底禁用自动更新提示
  6. Linux学习 --- 系统网络配置
  7. java的特性和版本
  8. fetch,axios简介与语法
  9. Ubuntu20.04安装PEA软件
  10. OpenJ_Bailian - 1088