vuelidate
made with Vuejs

vuelidate是基于模型的简单、轻量级验证组件。

与其他验证程序插件的最大区别是，验证完全与模板脱钩。这样，您无需为模板内的不同输入提供规则，而是为数据模型声明这些规则。

vuelidate也适用于Vuex getters ，即路由对象和计算值。由于我们在内核本身内部未包含任何验证器，因此与其他验证器插件相比，捆绑包要小得多。

安装

Npm

npm i vuelidate 

Yarn

yarn add vuelidate 

浏览器

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

使用

全局引入

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

组件中引入

import { validationMixin } from 'vuelidate'

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

基础用法

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

示例