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

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

编辑推荐

json-server 零代码30秒内搭建你的本地json数据接口服务，这个是一个很有意思的项目，比如后端程序员还未开发完成接口，前端可以使用它来模拟RESTful API的接口。
aravel-vue-spa 一款Laravel框架加Vue和Bootstrap开发的入门级SPA项目模板
vue-chartjs Chart.js的Vue.js版图表插件，简单易用、易于扩展、强大。
MPAndroidChart 一款功能强大的Android图表库，支持折线图、雷达图、气泡图和烛台图以及支持缩放、拖动和动画。
vue.js 一套用于构建用户界面的渐进式JS框架,Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

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