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聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个灵活可扩展的内容容器组件。
这是ApexCharts的Vue.js组件。