Vue.js Form Validation example with VeeValidate

vuejs-form-validation-example-veelidate-feature-image

In this tutorial, we’re gonna make a Vuejs Form Validation example with VeeValidate.

Example Overview

Our form has 3 fields:
– Username: check existence
– Email: check existence, then check email format
– Password: check existence, then check if at least 6 characters

vue-form-validation-demo

Practice

Add VeeValidate to Vue Project

– with npm
npm install vee-validate

– with yarn
yarn add vee-validate

package.json after installation:

Use VeeValidate

main.js

Form Validation Component

We use v-validate directive for input tag we want to validate (make sure that it has a name attribute -> for error messages).

We pass to v-validate directive a string which contains a list of validation rules (separated by a pipe ‘|’).

In the example above:
required to indicate that the field is required
email to indicate that the field must be an email.

To display the error message, we use the errors.first() method:

We also use errors.has() and submitted bool variable for v-if directive.

components/FormValidation.vue

App Component

App.vue

Source Code

vue-form-validation

By grokonez | November 5, 2018.



Related Posts


Got Something To Say:

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

*