vuelidate下载 - 简单轻量级的vue表单验证器

4895 2020-02-27 JavaScript MIT 官方网站

简单轻量级的vue表单验证器,基于模型、与模板解耦、无依赖的简约库。

vuelidate下载

validators@1.0.0-alpha.2.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

core@1.0.0-alpha.1.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

validators@1.0.0-alpha.1.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

core@1.0.0-alpha.2.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

v0.7.5.zip(v0.7.5) 下载

docs@2.0.0-alpha.0.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

core@2.0.0-alpha.0.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

validators@2.0.0-alpha.0.zip(%40vuelidate%2Fvalidators%402.0.0-alpha.0) 下载

v0.7.4.zip(v0.7.4) 下载

v0.7.3.zip(v0.7.3) 下载

vuelidate趋势

vuelidate介绍

Simple, lightweight model-based validation for Vue.js

Sponsors

Gold

   VueConf.us  

Silver

   NativeScript  

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.netlify.com/

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.netlify.com/

Contributing

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# create UMD bundle.npm run build# Create docs inside /gh-pages ready to be publishednpm run docs# run unit testsnpm run unit# run all testsnpm 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