0.7.6 • Published 8 months ago

vuelidate v0.7.6

Weekly downloads
208,554
License
MIT
Repository
github
Last release
8 months ago

vuelidate

codecov gzip size

Simple, lightweight model-based validation for Vue.js

Sponsors

Silver

Bronze

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/

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

Emeriti

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

License

MIT

sb-filmothequeresource-hubnr-componentsui-kit-oohdesk@ixlayer/ixlayer-componentsquasar-app-extension-stellar-formsauth-oside@monukanyal/multiple-tagemail-componenthungtv12345store-componentsvue-components-laurensbuildinglinkvue-dynamic-gridnotary-fees-calcnotaryfeescalcnotary-fees-cal@filipigustavo/workplace-registrationsalesforce-query-editor@selfagencyllc/dev-tools-vuequasar-app-extension-imagina-extinfonaligy-vue-components@infonaligy/inf-vue-componentsrb-ui-quasarsalesforce-query-editor-appsalesforce-query-editor-testsala-components-v2safabasesavtestvca-ui@onereach/step-inputs-commonunicorn-signup-componentvue-cgvue-dynamic-form-schemavue-common-pagessyl-wechat-menuspn-utilitytimeragent-coretmz_themetng-form-designertng-platform-designersitewhere-ide-componentssitewhere-admin-ui-pluginsshark-commonssbc-common-componentsshop-appshopexpress-coresimple-form-managersone-frontend-componentssone-nuxt-module-vuelidateui-crmts-vue-dom-helpertutu-adminvue-test-onesvuelidate-cyrillic-email-validatorvuelidate-error-generatorvuelidate-property-decoratorsvuemerangvue-step-wizardvue-storefrontvue-weblineindia-emailvue-weblineindia-passwordvue-weblineindia-phone-numbervue-weblineindia-urlvue-webpago-clienttest-aam-artsavue-mabuyavue-query-builder-advantissvue-model-schemaquasar-app-extension-stellarvue-material-form-manufacturevue-humanvuefrontvuetifullvue2-step-wizardvuex-formsvuexpweui-for-vuezhiwang-clizkt-formzp-front-upzyosadminxsqvuecomponentsxushuming-vue-pack-demoxushuming-businessb2w-componentsbedrock-vue-credential-creator-wizardbedrock-setupbakellodealer-shopcadfacescafe-ui-extenddemo-hr-portaldmf_auth_vuebstartercs-componentsbolt-inputsclformcontrolsdx-uicheckout-counter-desktop
0.7.6

8 months ago

0.7.5

1 year ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.0

3 years ago

0.6.2

3 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.0

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.1

5 years ago

0.1.0

5 years ago