Vuetify provides built-in validation of form inputs.
To use built-in validation, pass in an array of Javascript expressions to the rules
prop of the form input.
For example: an array of rules
in the wrapping component’s data
object:
data () {
return {
rules: {
required: value => !!value || 'Required.',
minLength: value => (value && value.length >= 3) || 'Username must be 3 or more characters',
email: value => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return pattern.test(value) || 'Invalid email.'
}
}
}
}
Some of which are passed in as an array to the rules
prop of the <v-text-field>
component
<v-text-field
:rules="[rules.required, rules.minLength]"
name="username"
type="text"
/>
Rules are validated sequentially, and will display a maximum of one error at a time, so order matters.
If more complex validation is required, Vuetify can integrate Vee-validate or Vuelidate.