Basic usage
In Vue, we can usev-modelDirective to bind form data, usev-if、v-showetc. to control the display and hiding of the form, and usev-bind、v-onetc. to bind the form's properties and events. But Vue does not provide built-in custom validation rules, we need to implement it ourselves.
In order to implement custom validation rules, we need to bind a custom directive to the form element to handle the verification logic. In a custom directive, we can use it to get the value of the directive, use it to get the value of the form element, and use it to get the parameters of the directive.
The following is a simple form as an example to demonstrate how to implement custom validation rules.
<template>
<div>
<label>username：</label>
<input type="text" v-model="username" v-custom-validator:="true">
<div v-show="usernameError">{{ usernameErrorMessage }}</div>
<label>password：</label>
<input type="password" v-model="password" v-custom-validator:="true" v-custom-validator:="6">
<div v-show="passwordError">{{ passwordErrorMessage }}</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
usernameError: false,
passwordError: false,
usernameErrorMessage: '',
passwordErrorMessage: ''
}
},
directives: {
'custom-validator': {
bind(el, binding) {
const validator = ;
const value = ;
const input = el;
const checkValidity = () => {
const isValid = validate(, validator, value);
if (isValid) {
('');
} else {
(getErrorMessage(validator, value));
}
};
('input', checkValidity);
('blur', checkValidity);
}
}
}
};
function validate(value, validator, arg) {
switch (validator) {
case 'required':
return () !== '';
case 'minlength':
return ().length >= arg;
default:
return true;
}
}
function getErrorMessage(validator, arg) {
switch (validator) {
case 'required':
return 'This field is required';
case 'minlength':
return `The field length cannot be less than${arg}Characters`;
default:
return '';
}
}
</script>
In the above example, we customize a directive called custom-validator and bind it to the input box of the username and password in the template. In the directive, we get the parameter validator and value of the directive, as well as the form element input. Next, we define a checkValidity method and bind it to the input and blur events of the form element. In the checkValidity method, we use the validate method to verify that the value of the input box complies with the rule. If the rule is compliant, we set the custom verification information of the input element to an empty string, otherwise set it to an error message. Finally, we use the v-show directive in the template to control the display and hiding of error messages.
Combination verification rules
Sometimes, we need to perform combination verification of the form, such as verifying that the username and password meet the requirements at the same time. In order to implement the combination verification rule, we can add a new parameter to the checkValidity method to represent the combination verification rule. Then, in the validate method, we can judge whether combination verification is required based on the combination verification rules. Finally, we use the computed attribute in the template to calculate whether the form has passed the combination verification, and use the v-show directive to control the display and hiding of error messages.
The following is an example of a combination verification rule to demonstrate how to implement a combination verification rule.
<template>
<div>
<label>username：</label>
<input type="text" v-model="username" v-custom-validator:="true" v-custom-validator:="6">
<div v-show="usernameError">{{ usernameErrorMessage }}</div>
<label>password：</label>
<input type="password" v-model="password" v-custom-validator:="true" v-custom-validator:="6">
<div v-show="passwordError">{{ passwordErrorMessage }}</div>
<button @click="submit" :disabled="isSubmitDisabled">submit</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
usernameError: false,
passwordError: false,
usernameErrorMessage: '',
passwordErrorMessage: ''
}
},
directives: {
'custom-validator': {
bind(el, binding) {
const validator = ;
const value = ;
const input = el;
const checkValidity = (combineValidator) => {
const isValid = validate(, validator, value, combineValidator);
if (isValid) {
('');
} else {
(getErrorMessage(validator, value));
}
};
('input', () => checkValidity(false));
('blur', () => checkValidity(false));
('change', () => checkValidity(true));
}
}
},
computed: {
isSubmitDisabled() {
return || ;
}
},
methods: {
submit() {
// Submit the form }
}
};
function validate(value, validator, arg, combineValidator) {
switch (validator) {
case 'required':
return () !== '';
case 'minlength':
return ().length >= arg;
default:
if (combineValidator) {
return validate(value, 'required', true) && validate(value, 'minlength', arg);
}
return true;
}
}
function getErrorMessage(validator, arg) {
switch (validator) {
case 'required':
return 'This field is required';
case 'minlength':
return `The field length cannot be less than${arg}Characters`;
default:
return '';
}
}
</script>
In the above example, we added a judgment of the combination verification rule on the change event of the form element. If the value of the form element conforms to the rule before the user clicks the Submit button, the form can be submitted. Otherwise, the submit button will be disabled. In the validate method, we added a new parameter combineValidator to indicate whether combination verification is required. If combination verification is required, we will judge whether it meets the requirements based on the combination verification rules. Finally, we use the computed property to calculate whether the form has passed the combination verification, and use the v-show directive in the template to control the display and hiding of error messages.
Summarize
This article describes how to perform custom form validation in Vue. We use custom directives to handle the verification logic, use the validate method to verify whether the input box's value complies with the rules, and use the getErrorMessage method to get the error message. At the same time, we also demonstrate how to implement the combination verification rules and how to use the computed attribute to calculate whether the form has passed the combination verification. Hope this article can help you better understand form custom validation in Vue.
The above is a detailed explanation of how to perform form custom verification in Vue. For more information about Vue form custom verification, please follow my other related articles!