vue页面多表单验证保存
2024-10-21 17:23:11
页面中有多个表单需要验证,可以使用以下方法:
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)
})
}
}
}
最新文章
- ES6新特性概览
- MVC 问答
- 记录HttpWebRequest辅助类
- C++ WIN32控制台异常关闭回调函数
- Invoke BeginInvoke
- for循环,列表和格式化输出
- 50一个Android开发技巧(01 利用好layout_weight属性)
- web中国的数据分析过程
- java遍历Set集合
- 结构-行为-样式-Js函数节流
- 最新webstorm
- LVM学习笔记
- js 对日期处理
- python 函数定义及调用
- 网站优化URL需要注意的几个细节
- Java虚拟机 - 类初始化
- 三、oracle 用户管理一
- java编程常用的快捷键
- img底边空隙问题原因和解决方案(修改)
- 图解Eclipse或者SpringSource Tool Suite 创建模块化Maven项目