@768bit/vmv 中文文档教程

Question

vuelidate

简单、轻量级的基于模型的验证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

http://monterail.github.io/vuelidate/

Installation

npm install vuelidate --save

您可以导入库并用作 Vue 插件来在包含验证配置的所有组件上全局启用该功能。

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

或者，可以将 mixin 直接导入到将使用它的组件中。

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

包中还提供了浏览器就绪包。

<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

对于要验证的每个值，您必须在验证选项中创建一个键。 您可以通过在输入框上使用适当的事件来指定输入何时变脏。

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)
    }
  }
}

这将产生一个验证对象：

$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
  }
}

查看文档以获取更多示例：https://monterail.github.io/vuelidate/

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

有关其工作原理的详细说明，请查看指南和vue-loader 文档。

License

MIT

版权所有 (c) 2016 Paweł Grabarz & 达米安·杜利兹