VeeValidate Logo

VeeValidate

Simple Vuejs Input Validation

What is vee-validate?

This is a plugin for Vue.js that allows you to validate input fields, and display errors, in an easy and powerful way.

You don't have to do anything fancy in your app. Most of the work goes into the html. You only need to specify, for each input, what kind of validators should be used when the value changes. You will then get informed of the errors for each field.

Although most of the validations occur automatically, you can use the validator however you see fit. The validator object has no dependencies and is a standalone object.

Currently there are over 20 validation rules available in the plugin. This plugin is inspired by PHP Framework Laravel's validation syntax.

Getting started

Installation

You can install this plugin via npm or via a CDN.

npm

npm install vee-validate --save

CDN

  <!-- jsdelivr cdn -->
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

  <!-- unpkg -->
  <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>

Usage

  <script src="path/to/vue.js"></script>
  <script src="path/to/vee-validate.js"></script>
  <script>
    Vue.use(VeeValidate); // good to go.
  </script>

or you may import it using ES6:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

Basic Example

All you need is to add the v-validate directive to the input you wish to validate, and make sure your input has a name attribute for error messages generation.

Then, pass to the directive a rules string which contains a list of validation rules separated by a pipe '|'. For the following example the validation rules are straight forward. Use required to indicate that the field is required, and email to indicate that the field must be an email. To combine both rules we assign the string value required|email to the v-validate expression value.

export default { name: 'basic-example' };
<div class="column is-12"> <label class="label" for="email">Email</label> <p :class="{ 'control': true }"> <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email"> <span v-show="errors.has('email')" class="help is-danger">{{"{" + "{ errors.first('email') }" + "}"}}</span> </p> </div>

Available Rules

There are more than 20 rules available to validate your inputs: