Form Validation in a Vue 3 App with Vee-Validate 4 — Image Dimensions and Emails

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.

dimensions

We can use the dimensions rule to validate that the selected image file has the given width and height.

For example, we can use it by writing:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" type="file" rules="dimensions:120,120" />
    <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 set the width and height by putting them after dimensions: in the rules prop.

Also, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" type="file" :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: { dimensions: [120, 120] },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the dimensions rule with an object.

Also, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" type="file" :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: { dimensions: { width: 120, height: 120 } },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to do the same thing.

email

The email rule validates that the inputted value is a valid email.

For instance, we can write:

<template>
  <Form @submit="submit" v-slot="{ errors }">
    <Field name="field" rules="email" />
    <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: {
    submit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We set the rules prop to 'email' to add the rule.

Also, we can write:

<template>
  <Form @submit="onSubmit" 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: { email: true },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to add the email rule with an object.

Conclusion

We can use Vee-Validate 4 to validate image file dimensions and emails.