Flexible Validation Library For Vue.js 2.0

Flexible Validation Library For Vue.js 2.0

A simple, powerful and flexible validation library for Vue.js 2.0.

vue-validity

A simple, powerful and flexible validation library for Vue.js 2.0.

Features

  • Model-based validation.
  • Validate custom components.
  • Set custom errors (eg. server-side errors) via $setErrors.
  • Create custom validators along with custom errors messages.
  • Automatically adds input classes based on state (eg. 'dirty', 'invalid', etc.)

Installation

npm install --save vue-validity

import Vue from 'vue'
import Validity from 'vue-validity'

// Optionally provide configuration options.
Vue.use(Validity, {})

Basic usage

For each value you want to validate, you have to create a key inside validations options.

export default {
  data () {
    return {
      name: ''
    }
  },
  validations: {
    name: ['required', 'minlength:4']
  }
}

This will result in the following validation object:

$v: {
  "name": {
    "required": {
      "$value": false,
      "$message": "name is required."
    },
    "minlength": {
      "$value": true,
      "$message": "name should be at least 4 chars."
    },
    "$valid": false,
    "$dirty": false,
    "$error": false,
    "$errors": [
      {
        "field": "name",
        "message": "name is required."
      }
    ]
  },
  "$valid": false,
  "$dirty": false,
  "$error": false,
  "$errors": [
    {
      "field": "name",
      "message": "name is required."
    }
  ]
}

Checkout the docs for more examples: https://jrenton.github.io/vue-validity/

Contributing

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

License

MIT

Original vuelidate work Copyright (c) 2016 PaweĊ‚ Grabarz & Damian Dulisz

Github Repository

Tags: #VueJs