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
https://vuelidate.netlify.com/
Installation
npm install vuelidate --saveYou 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> <!-- The builtin validators is added by adding the following line. --> <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://vuelidate.netlify.com/
Contributing
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # create UMD bundle. npm run build # Create docs inside /gh-pages ready to be published npm run docs # run unit tests npm run unit # run all tests npm testFor detailed explanation on how things work, checkout the guide and docs for vue-loader.
Contributors
Current
Emeriti
Here we honor past contributors who have been a major part on this project.
