vuelidate
Simple, lightweight model-based validation for Vue.js
Features & characteristics:
- Model based
- Decoupled from templates
- Dependency free, minimalistic library
- Support for collection validations
- Support for nested models
- Contextified validators
- Easy to use with custom validators (e.g. Moment.js)
- Support for function composition
- Validates different data sources: Vuex getters, computed values, etc.
Demo & docs
http://monterail.github.io/vuelidate/
Installation
npm install vuelidate --save
You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.
Vue
Alternatively it is possible to import a mixin directly to components in which it will be used.
var Component = Vue
The browser-ready bundle is also provided in the package.
<!-- The builtin validators is added by adding the following line. -->
Vue
Basic usage
For each value you want to validate, you have to create a key inside validations options. You can specify when input becomes dirty by using appropriate event on your input box.
{ return name: '' age: 0 } validations: name: required minLength: age: between:
This will result in a validation object:
$v: name: "required": false "minLength": false "$invalid": true "$dirty": false "$error": false "$pending": false age: "between": false "$invalid": true "$dirty": false "$error": false "$pending": false
Checkout the docs for more examples: https://monterail.github.io/vuelidate/
Contributing
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# create UMD bundle.npm run build# Create docs inside /gh-pages ready to be publishednpm run docs# run unit testsnpm run unit# run all testsnpm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
License
Copyright (c) 2016 Paweł Grabarz & Damian Dulisz