When using the u-form component of the UView UI in a Vue project, the need for multiple forms to be simultaneously validated is very common. For example, when we have multiple forms that need to be verified and submitted in the same page, we need to make sure that each form can be individually verified, and batch verification can be performed at the same time.
Next, we combine the code of the actual project to explain how to use the u-form component to achieve simultaneous verification of multiple forms.
1. Project background
Suppose you have a page and the user needs to fill in two forms: User information and Company information at the same time. User information includes name and age, and company information includes company name and position. You want to be able to verify both forms at the same time when the user clicks the Submit button to ensure that the data of each form meets the requirements.
2. Code example
2.1 Page Template
<template>
<view>
<!-- User Information Form -->
<u-form :model="userForm" ref="userForm" @submit="submitForms">
<u-form-item label="Name" prop="name" :rules="nameRules">
<u-input v-model="" placeholder="Please enter your name" />
</u-form-item>
<u-form-item label="age" prop="age" :rules="ageRules">
<u-input type="number" v-model="" placeholder="Please enter age" />
</u-form-item>
<u-form-item>
<u-button type="primary" block formType="submit">Submit user information</u-button>
</u-form-item>
</u-form>
<!-- Company Information Form -->
<u-form :model="companyForm" ref="companyForm" @submit="submitForms">
<u-form-item label="Company Name" prop="companyName" :rules="companyNameRules">
<u-input v-model="" placeholder="Please enter the company name" />
</u-form-item>
<u-form-item label="Position" prop="position" :rules="positionRules">
<u-input v-model="" placeholder="Please enter a position" />
</u-form-item>
<u-form-item>
<u-button type="primary" block formType="submit">Submit company information</u-button>
</u-form-item>
</u-form>
<!-- Submit Button -->
<u-button type="success" block @click="submitForms">Submit all information</u-button>
</view>
</template>
2.2 Page script
export default {
data() {
return {
// Data of user information form userForm: {
name: '',
age: ''
},
// Verification rules for user information form nameRules: [
{ required: true, message: 'Name is required', trigger: 'blur' }
],
ageRules: [
{ required: true, message: 'Age is required', trigger: 'blur' },
{ type: 'number', message: 'Please enter a valid age', trigger: 'blur' }
],
// Data of company information form companyForm: {
companyName: '',
position: ''
},
// Verification rules for company information form companyNameRules: [
{ required: true, message: 'Company Name is required', trigger: 'blur' }
],
positionRules: [
{ required: true, message: 'Position is required', trigger: 'blur' }
]
};
},
methods: {
// Submit the form submitForms() {
// Verify all forms at the same time const userFormValidation = this.$();
const companyFormValidation = this.$();
// Use to verify multiple forms in parallel ([userFormValidation, companyFormValidation])
.then(() => {
// If all forms are validated this.$('All forms are verified and submitted successfully');
// Data submission can be performed here })
.catch(() => {
// If any form verification fails this.$('Form verification failed, please check the input');
});
}
}
};
3. Detailed description
3.1 Form component usage
u-form: This is a form component in the UView UI. Each form component binds the corresponding data object through :model and sets the reference name through ref so that the form's verification method is obtained and called in JavaScript.
u-form-item: Each form item. It is used to wrap a form field and specify the field name through prop to bind to form data.
u-input: Component used to input data. It binds data in two-way through v-model.
3.2 Verification logic
Form verification rules: Each form item has corresponding verification rules (rules). These rules ensure that the input of the field is as expected. In this example, we use rules for required and type checking (such as the number type).
validate method: Each u-form component has a validate method that triggers the form's verification and returns a promise. If the form validation is successful, the Promise will be successfully parsed; if the verification fails, the Promise will be rejected.
3.3 Submission and batch verification
submitForms method: This is the submission processing method of the page. In this method, we use this.$() and this.$() to trigger the verification of the two forms respectively, and pass verifies the two forms in parallel.
: We wrap the verification Promise of the two forms into . In this way, the verification of the two forms will be performed simultaneously. When all form validation is successful, the then method is triggered; if any form validation fails, the catch method will be triggered.
this.$: Used to display a prompt message to notify the user whether the submission is successful or failed.
4. Summary of key points
Use ref to refer to multiple forms for easy access to each form instance.
Trigger form verification with this.$().
Use to verify multiple forms in parallel to ensure that all forms are validated simultaneously.
Use the Promise returned by validate to handle the logic of success and failure.
5. Application scenarios in actual projects
In actual projects, there may be the following scenarios that require verification of multiple forms:
Multi-step form: Users fill in different forms in different steps, and they need to verify the form of all steps at the same time when submitting.
User and company information: Users need to submit multiple forms (for example, personal information and company information) on the same page, and these forms have different verification rules.
Dynamic form: Dynamically display multiple form items according to different user selections, and finally perform unified verification.
By using the parallel verification method of u-form, these requirements can be easily achieved and user experience and development efficiency can be improved.
This is the article about how Vue implements simultaneous verification of multiple form forms of Vue. For more relevant contents for simultaneous verification of multiple form forms of Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!