The following two methods are used to achieve unified verification of multiple forms:
1. Define the template content
Add ref attribute to the el-form form to get the form component object
<template>
<div>
<el-form ref="form1" :rules="rules1">
<!-- Form content -->
</el-form>
<el-form ref="form2" :rules="rules2">
<!-- Form content -->
</el-form>
<el-button @click="submit">submit</el-button>
</div>
</template>2. Method 1
In the above code, we add ref attributes to each el-form form, form1 and form2 respectively. In the submit method, we use the validate method to perform form verification on the two forms respectively.
export default {
data() {
return {
form1: {},
form2: {},
rules1: {},
rules2: {}
}
},
methods: {
submit() {
const form1Valid = this.$refs.()
const form2Valid = this.$refs.()
if (form1Valid && form2Valid) {
// Submit the form uniformly }
}
}
}3. Method 2
In the above code, we add a ref attribute to each el-form form. In the submit method, we traverse the formRefs form array and verify each form in turn.
export default {
data() {
return {
// Arrays are used to store ref values for all forms formRefs: [ 'form1', 'form2' ],
form1: {},
form2: {},
rules1: {},
rules2: {}
}
},
methods: {
submit() {
// Variables that mark whether all forms pass the verification let isValid = true
// Iterate through the form array and verify each form in turn (ref => {
this.$refs[ref].validate(valid => {
if (!valid) {
isValid = false
}
})
}}
// If all forms are verified, perform the submit operation if (isValid) {
// Perform the submission operation }
}
}
}Summarize
This is the end of this article about two methods to implement unified verification of multiple el-form forms. For more related contents for unified verification of vue el-form forms, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!