In ant design framework development projects, use FormModel to implement form functions. When verifying a form, you only need to pass in the agreed verification rules through the rules attribute and set the prop attribute of FormItem to the field name to be checked.
For more configuration details, see:/components/form-model-cn/
validate will verify the entire form, and as long as the form item with the prop attribute is bound, it will be checked. validateField can only verify some fields in the form.
Code example:
template form rendering
<a-form-model ref="Form" :model="form" :rules="rules">
<a-form-model-item prop="mobile">
<a-input v-model="" size="large" placeholder="Please enter your mobile phone number" :maxLength="50" />
</a-form-model-item>
<a-form-model-item prop="verificationCode" class="other">
<a-input v-model="" size="large" placeholder="Please enter verification code" :maxLength="6" />
<a-button size="large" :disabled=" || !" @click="getCode">
{{ ? 'Sent(' + + ')' : 'Get the verification code' }}
</a-button>
</a-form-model-item>
<a-form-model-item prop="password">
<a-input-password v-model="" size="large" placeholder="Please enter your password" :maxLength="50" />
</a-form-model-item>
<a-form-model-item prop="confirmPassword">
<a-input-password v-model="" size="large" placeholder="Please confirm your password" :maxLength="50" />
</a-form-model-item>
</a-form-model>
Form parameter verification rules
rules: {
mobile: [{ required: true, validator: (this), trigger: ['blur'] }],
verificationCode: [{ required: true, message: 'Please enter the verification code', trigger: ['blur'] }],
password: [{ required: true, validator: (this), trigger: ['blur'] }],
confirmPassword: [{ required: true, validator: (this), trigger: ['blur'] }]
}
// Mobile phone number verificationmobileCheck(rule, value, callback) {
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
if (!value) {
callback('Please enter your mobile phone number')
return
}
if (!((/(^\s*)|(\s*$)/g, ""))) {
callback('Please enter the correct mobile phone number')
return
}
callback()
}
// Password verificationpasswordCheck(rule, value, callback) {
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
if (!value) {
callback('Please enter your password')
return
}
if () {
this.$(['confirmPassword'])
}
if (!(value)) {
callback('The password must be 8-20 digits, consisting of numbers and uppercase and lowercase letters')
return
}
callback()
}
// Enter password again to verifyconfirmPasswordCheck(rule, value, callback) {
let { password } =
if (!value) {
callback('Please enter your password again')
}
if (password) {
if (password === value) {
callback()
} else {
callback('The password is inconsistent when entering the two times, please re-enter')
}
} else {
callback('Please enter your password first')
}
},
Parameter verification
Use validate to verify the entire form. When the return value of the callback function is true, it means the verification is passed, and false means the verification is not passed.
this.$(valid => {
if (!valid) {
// The verification fails return
}
// Logic after verification is passed ....
})
Use validateField to verify a form item. When the return value of the callback function is empty (''), it means that the verification is passed. When it is not empty, it means that the verification is not passed.
this.$(['mobile'], valid => {
if (valid) {
// The verification fails return
}
// Logic after verification is passed ....
})
Use validateField to verify multiple form items
Note: There are several form items, and the callback function will be executed several times. The execution order is the order of array writing, and each time the verification result of the corresponding form item is returned. This will cause the logic to be executed multiple times after the verification is passed. There are two solutions:
1. Create a new array arr. Each time the callback function is executed, push the result into arr. Add judgment logic in the callback function. When the array length is equal to the form item and each item value of the array is empty (''), it means that the verification is passed
//Storage the validid results for each verificationlet validateFieldList = []
// Verification methodthis.$(['mobile', 'captcha'], valid => {
if (!valid) {
// After the verification is passed, follow the valid to the array (valid)
}
// Verify that the array length is equal to the form item, and each item value of the array is empty ('') if ( == 2 && (item => item === '')) {
//Calculated business logic }
// Verification does not pass logic return
})
2. Use the () method to encapsulate each form item verification into a promise function. After all verification functions are returned successfully, the subsequent code logic will be executed.
// Form items that need to be checkedlet fileids = ['mobile', 'captcha']
// The parameters inside are an array, and each item in the array is a function call that returns promise((item => new Promise((resolve, reject) => {
// Return each verification result this.$(item, err => resolve(err))
}))).then(res => {
//The first parameter of then is that all promises are called successfully. The return result is an array, and each item in the array is the return result of the function promise if ((item => item).length) return
// Logic after successful verification
})Attachment: The pitfalls encountered in partial verification of form validateField method in element
Step1() {
this.$(, (valid) => {
if (!valid) {
// Verify the operation performed by passing }
})
},
// When multiple fields need to be checked, the above writing method can enter if by passing the verification of one field. There is no verification of all fields. Change the following writing method:
Step1() {
const validateList = [] // Define an empty array this.$(, (valid) => {
// Array of rules to be verified (valid)
})
if (((item) => item === '')) {
// Operations performed when all are empty }
},Summarize
This is the article about the use and differences between Vue form verification validate and validateField. For more relevant form verification validate and validateField usage content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!