Form Validation in a Vue 3 App with Vee-Validate 4 — Confirmation and Number Rules

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.

between

The between rule lets us validate that the number entered is between a given range.

To use it, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="between:1,10" />
    <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 pass in a string into the rules prop to add the rule to the Field component.

Also, we can pass an object into the rules prop to add the rule:

<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: { between: [1, 10] },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

The min and max numbers for the range are in the array.

Both the min and max numbers are required.

confirmed

The confirmed rule validates that the field under validation must have the same value as another field.

To use it, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="password" type="password" />

    <Field name="confirmation" type="password" rules="confirmed:@password" />
    <span>{{ errors.confirmation }}</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>

The rules prop is set to confirmed:@password so that Vee-Validate checks that the confirmation field has the same value as the password field.

The Field components must all be inside a Form component.

digits

The digits rule checks that the inputted value must be numeric and have the specified number of digits.

For instance, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="digits:3" />
    <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 validate that the inputted value must have exactly 3 digits with the 'digits:3' string.

Also, we can write:

<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: { digits: 3 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the same rule.

Conclusion

We can add various form validation rules in our Vue 3 app with Vee-Validate 4.