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

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.

The post Implement Vue.js Input Validation Plugin Easily – vee-validate appeared first on Lipku.com.

Leave a Reply

Your email address will not be published. Required fields are marked *