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.
Rules with Multiple Parameters
We can have global validation rules with multiple parameters.
To define and use them, we write:
<template>
<Form @submit="onSubmit">
<Field name="number" as="input" rules="required|min:0,100" />
<ErrorMessage name="number" />
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage, defineRule } from "vee-validate";
defineRule("required", (value) => {
if (!value || !value.length) {
return "This field is required";
}
return true;
});
defineRule("min", (value, [min, max]) => {
if (!value || !value.length) {
return true;
}
const numericValue = +value;
if (numericValue < min) {
return `This field must be greater than ${min}`;
}
if (numericValue > max) {
return `This field must be less than ${max}`;
}
return true;
});
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We define the min
rule with the min
and max
parameters.
And we check against them to return the right validation result.
true
means the value is valid.
Otherwise, we return an error message string.
Then in the rules
prop, we combine the required
rule with the min
rule.
Schema Validation
We can add the rules to the validation schema.
For example, we can write:
<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";
defineRule("required", (value) => {
if (!value || !value.length) {
return "This field is required";
}
return true;
});
defineRule("email", (value) => {
if (!value || !value.length) {
return true;
}
if (!/[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/.test(value)) {
return "This field must be a valid email";
}
return true;
});
defineRule("minLength", (value, [limit]) => {
if (!value || !value.length) {
return true;
}
if (value.length < limit) {
return `This field must be at least ${limit} characters`;
}
return true;
});
export default {
components: {
Form,
Field,
},
data() {
const schema = {
email: "required|email",
password: "required|minLength:8",
};
return {
schema,
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We defined the required
, email
, and minLength
rules.
Then we put them all in the schema
object.
Then we set the validation-schema
prop to the schema
reactive property.
And then we display the error messages by getting the errors
object from the slot props of the Form
component.
Now when we use the form, the validation rules will be used to validate the form.
Conclusion
We can validate more complex forms with in our Vue 3 app with Vee-Validate 4.