Implement Vue.js Input Validation Plugin Easily – vee-validate

Category: Vue.js Vue.js Form | September 27, 2021
Author: logaretm
Official Page: Go to website
Last Update: September 27, 2021
License: MIT

vue input validation

Description:

Are you tired of creating validation functions for your Vue.js Application? If yes then, here is a good news for you. You can use vee-validate component which is Vue.js input validation plugin. This component is light-weight and easy to use.

How can I use it?

1. Install the input validation component with npm or yarn, like this.

#npm
npm install [email protected] --save

#yarn
yarn add [email protected]

2. Then, import the component in your file.

import { Field, Form } from 'vee-validate';

3. Register the component and create a simple required validator.

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    // Validator function
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

4. Now, create a form with Form and Field components. Like following:

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />

  <span>{{ errors.field }}</span>
</Form>

And, you are done. 🙂