Form validation is an important part of any app.
In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.
Use Predefined Rules
We can use predefined validation rules from the @vee-validate/rules package.
To install the package, we run:
yarn add @vee-validate/rules
or:
npm install @vee-validate/rules
Then we can add the rules from the package with the defineRule function by writing:
<template>
<Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
<Field name="email" as="input" />
<span>{{ errors.email }}</span>
<br />
<Field name="password" as="input" type="password" />
<span>{{ errors.password }}</span>
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import { required, email, min } from "@vee-validate/rules";
defineRule("required", required);
defineRule("email", email);
defineRule("min", min);
export default {
components: {
Form,
Field,
},
data() {
const schema = {
email: "required|email",
password: "required|min:8",
};
return {
schema,
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We import the rules from the @vee-validate/rules package and then pass them into the defineRule function to use it.
Then we can use them in the schema validation schema.
In the template, we display the error messages from the errors object.
If we enter something that’s invalid, we see a generic error message displayed.
Also, we can import all rules from the package by writing:
<template>
<Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
<Field name="email" as="input" />
<span>{{ errors.email }}</span>
<br />
<Field name="password" as="input" type="password" />
<span>{{ errors.password }}</span>
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default {
components: {
Form,
Field,
},
data() {
const schema = {
email: "required|email",
password: "required|min:8",
};
return {
schema,
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
Available Rules
There are many built-in validation provided by the @vee-validate/rules package.
alpha
The alpha rule validates that the inputted value only has alphabetic characters.
For instance, we can use it by writing:
<template>
<Form @submit="submit" v-slot="{ errors }">
<Field name="field" rules="alpha" />
<span>{{ errors.field }}</span>
</Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default {
components: {
Form,
Field,
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We can also set the rules prop value in object format:
<template>
<Form @submit="submit" v-slot="{ errors }">
<Field name="field" :rules="validations" />
<span>{{ errors.field }}</span>
</Form>
</template>
<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default {
components: {
Form,
Field,
},
data() {
return {
validations: { alpha: true },
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
to add the same validation rule.
Conclusion
We can add predefined validation rules into our Vue 3 app with Vee-Validate 4.
