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.
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
Alternatively it is possible to import a mixin directly to components in which it will be used.
import { validationMixin } from 'vuelidate'
var Component = Vue.extend({
mixins: [validationMixin],
validations: { ... }
})
The browser-ready bundle is also provided in the package.
<script src="vuelidate/dist/vuelidate.min.js"></script>
<script src="vuelidate/dist/validators.min.js"></script>
Vue.use(window.vuelidate.default)
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.
import { required, minLength, between } from 'vuelidate/lib/validators'
export default {
data () {
return {
name: '',
age: 0
}
},
validations: {
name: {
required,
minLength: minLength(4)
},
age: {
between: between(20, 30)
}
}
}
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
npm install
npm run dev
npm run build
npm run docs
npm run unit
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
License
MIT
Copyright (c) 2016 Paweł Grabarz & Damian Dulisz