vue页面多表单验证保存

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

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)
            })
        }
    }
}