In this article, we take the v-text-field component in Vuetify as an example to summarize Vuetify's built-in form validation rule support.
Point
To add validation to the field, we must do two things:
- Make field required
- Create validation rules for fields
Consider the following example:
required is a newly introduced attribute in HTML5. The required attribute specifies that input fields must be filled in before the form is submitted.
If this attribute is used, the field is required (or required).
[Note] The required attribute is applicable to the following <input> types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.
Parsing
The official Vuetify only briefly gives a basic introduction to the property (Prop) rules in the v-text-field component, as shown in the figure below, and does not give a detailed usage example:
Combined with the existing experience on the Internet, it can be concluded that the rule verification of a small number of basic form components can be supported by the required attribute above and the proprietary rules attribute in the Vuetify component here. In fact, the usage format is already shown in the first figure.
The verification rules used above are as follows:
Basic example
A more complex and practical version of the above example is as follows:
Then, define the following rules in data:
v-form verification and submission operation
The v-form component provides three functions related to the verification operation, and we can access them by setting ref on the component. For example, <v-form ref="form">.
- this.$refs.form.validate(): Will verify all inputs and return whether they are all valid.
- this.$refs.form.reset(): will clear all input and reset the check error.
- this.$refs.form.resetValidation(): Just reset the input validation without changing its state.
For example
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required
></v-text-field>
<v-select
v-model="select"
:items="items"
:rules="[v => !!v || 'Item is required']"
label="Item"
required
></v-select>
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'You must agree to continue!']"
label="Do you agree?"
required
></v-checkbox>
<v-btn
:disabled="!valid"
color="success"
class="mr-4"
@click="validate"
>
Validate
</v-btn>
<v-btn
color="error"
class="mr-4"
@click="reset"
>
Reset Form
</v-btn>
<v-btn
color="warning"
@click="resetValidation"
>
Reset Validation
</v-btn>
</v-form>
</template>
<script>
export default {
data: () => ({
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
select: null,
items: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
],
checkbox: false,
}),
methods: {
validate () {
this.$refs.form.validate()
},
reset () {
this.$refs.form.reset()
},
resetValidation () {
this.$refs.form.resetValidation()
},
},
}
</script>Recommended Vue verification scheme: vee-validate
According to my search and analysis, after a big wave of sand-washing screening, the Vue library extension verification solution that has moved to the first place is none other than vee-validate. Moreover, this library is a complete template-based Vue verification framework that provides comprehensive support for web pages, and it closely follows the next version of Vue. It is very necessary for detailed research and use in enterprise development.
There is also a lightweight form-level verification library https://vuelidate.netlify.com/ Vuelidate, interested readers can study.
reference
https://vuetifyjs.com/en/api/v-text-field/#props
https://www.jenniferbland.com/form-validation-with-vuetify-in-a-vue-app/
https://blog.csdn.net/weixin_43970743/article/details/99976701