element 多个form一起校验
<template>
<div>
<el-form :model="form1" ref="form1Ref" :rules="rlues1"></el-form>
<el-form :model="form2" ref="form2Ref" :rules="rlues2"></el-form>
<el-form :model="form3" ref="form3Ref" :rules="rlues3"></el-form>
<el-form :model="form4" ref="form4Ref" :rules="rlues4"></el-form>
<el-button @click="submitForm"></el-button>
</div>
</template>
<script>
export default {
data () {
return {
rlues1: {
name: {required: true, message: '必填', trigger: 'blur'}
}
}
}
methods: {
submitForm () {
Promise.all([
this.validateForm('form1Ref'),
this.validateForm('form2Ref'),
this.validateForm('form3Ref'),
this.validateForm('form4Ref')
]).then(() => {
console.log('校验成功')
}).catch((err) => {
console.log('失败', err)
})
},
validateForm (formName) {
return new Promise((resolve, reject) => {
this.$refs[formName].validate((valid) => {
valid ? resolve() : reject(new Error('检验失败!'))
})
})
}
}
}
</script>
