vuelidate
made with Vuejs

vuelidate

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

相关问答
暂无相关问题
查看全部
简介及使用教程

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

示例

image.png

image.png

作者

Vuelidate

相关项目

这是一个基于Vue.js的Github样式的日历热图。
这是一个基于Splide的Vue滑块组件。
这是一个基于Vue的滚动条组件。
这是一个Bootstrap风格简单分页组件。
这是一个Vue.js 2打字机效果组件 。
这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。