Nosferatu's Pace Maker

    vuelidate
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/vuelidate package

    0.7.7 • Public • Published

    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

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

    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 test

    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.

    License

    MIT

    Keywords

    none

    Install

    npm i vuelidate

    DownloadsWeekly Downloads

    250,747

    Version

    0.7.7

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    61

    Last publish

    Collaborators

    • monterail-services
    • frizi
    • jandudulski
    • shentao