Vuelidate

Simple, lightweight model-based validation for Vue.js

VueForm
vuelidate/vuelidatevuelidate-next.netlify.app/vuelidate

README

vuelidate codecov

gzip size

Simple, lightweight model-based validation for Vue.js


Sponsors


Gold


Vuejs Amsterdam

Vue - The Road To Enterprise


Silver


Storyblok


Bronze


Vue Mastery logo Vue Mastery logo


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.js.org/

Vue 3 support


Vue 3 support is almost here with the Vuelidate 2 rewrite. Check out the next branch to see the latest progress.

Installation


  1. ``` sh
  2. npm install vuelidate --save
  3. ```

You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.

  1. ``` js
  2. import Vue from 'vue'
  3. import Vuelidate from 'vuelidate'
  4. Vue.use(Vuelidate)
  5. ```

Alternatively it is possible to import a mixin directly to components in which it will be used.

  1. ``` js
  2. import { validationMixin } from 'vuelidate'

  4. var Component = Vue.extend({
  5.   mixins: [validationMixin],
  6.   validations: { ... }
  7. })
  8. ```

The browser-ready bundle is also provided in the package.

  1. ``` html
  2. <script src="vuelidate/dist/vuelidate.min.js"></script>
  3. <script src="vuelidate/dist/validators.min.js"></script>
  4. ```

  1. ``` js
  2. Vue.use(window.vuelidate.default)
  3. ```

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.

  1. ``` js
  2. import { required, minLength, between } from 'vuelidate/lib/validators'

  4. export default {
  5.   data () {
  6.     return {
  7.       name: '',
  8.       age: 0
  9.     }
  10.   },
  11.   validations: {
  12.     name: {
  13.       required,
  14.       minLength: minLength(4)
  15.     },
  16.     age: {
  17.       between: between(20, 30)
  18.     }
  19.   }
  20. }
  21. ```

This will result in a validation object:

  1. ``` js
  2. $v: {
  3.   name: {
  4.     "required": false,
  5.     "minLength": false,
  6.     "$invalid": true,
  7.     "$dirty": false,
  8.     "$error": false,
  9.     "$pending": false
  10.   },
  11.   age: {
  12.     "between": false
  13.     "$invalid": true,
  14.     "$dirty": false,
  15.     "$error": false,
  16.     "$pending": false
  17.   }
  18. }
  19. ```

Checkout the docs for more examples: https://vuelidate.js.org/

Contributing


  1. ``` bash
  2. # install dependencies
  3. npm install

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

  8. # create UMD bundle.
  9. npm run build

  11. # Create docs inside /gh-pages ready to be published
  12. npm run docs

  14. # run unit tests
  15. npm run unit

  17. # run all tests
  18. npm test
  19. ```

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Contributors


Current


Damian Dulisz
Damian Dulisz 		Natalia Tepluhina
Natalia Tepluhina 		Natalia Tepluhina
Dobromir Hristov 		Marina Mosti
Marina Mosti

Emeriti


Here we honor past contributors who have been a major part on this project.

- Monterail
- Paweł Grabarz

License


MIT