Vue.js 表单校验插件


Posted in Javascript onAugust 14, 2016

Vuerify 是一个简单轻量的数据校验插件。内置基础的校验规则和错误提示。可自定义规则,规则类型支持正则、函数或者字符串。校验规则可全局注册也可以组件内注册。插件会给 vm 添加 $vuerify 对象,同时 watch 数据并校验合法性,如果有错误会存入 vm.$vuerify.$errors。

安装

npm i vuerify -S

使用

安装插件

import Vue from 'vue'
import Vuerify from 'vuerify'

Vue.use(Vuerify, /* 添加自定义规则 */)

添加自定义规则
test 可以是正则或者函数

{
 required: {
  test: /\S+$/,
  message: '必填项'
 }
}

组件内注册

{
 data () {
  username: '',
  password: ''
 },

 vuerify: {
  username: {
   test: /\w{4,}/, // 自定义规则,可以是函数,正则或者全局注册的规则(填字符串)
   message: '至少 4 位字符'
  },
  password: 'required' // 使用全局注册的规则
 }
}

API

$vuerify 包含如下属性

name description type default Value
$errors 数据校验失败的错误信息, 例如 username 校验失败会返回 { username: '至少 4 位字符' } Object {}
invalid 存在校验失败的字段 Boolean true
valid 不存在校验失败的字段 Boolean false
check 检查指定字段,传入数组,返回 Boolean Function(Array) -
clear 清空错误列表 Function -

v-vuerify

该指令可以在表单组件触发 blur 事件时验证数据并为组件设置类名(默认为 .vuerify-invalid)。可以是 input 等原生组件,也可以是自己封装过的组件。提供两个版本

安装

# Vue 1.x
npm v-vuerify -S

# Vue 2.0
npm v-vuerify-next -S

用法

import Vue from 'vue'
import VuerifyDirective from 'v-vuerify' // Vue1.x
import VuerifyDirective from 'v-vuerify-next' // Vue2.0

Vue.use(VuerifyDirective)
<input v-model="username" v-vuerify="'username'">

<x-input :value.sync="password" v-vuerify="'password'"></x-input>

Params

verifyInvalidClass

默认类名为 vuerify-invalid

<input v-model="username" v-vuerify="'username'" vuerify-invalid-class="error">

Modifiers

parent
如果 vuerify 是在父组件注册的,那么就需要指定 parent,让指令可以从父组件获取对应的 $vuerify,具体看 demo

Events

vuerify-invalid
vuerify-valid

Github: https://github.com/QingWei-Li/vuerify

Javascript 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
Javascript动画效果(3)
Oct 11 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
javascript中的 object 和 function小结
Aug 14 #Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 #Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 #Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 #Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 #Javascript
You might like
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
基于js实现checkbox批量选中操作
2016/11/22 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
js代码实现轮播图
2020/05/04 Javascript
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python 函数基础知识汇总
2018/03/09 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
入党自荐书范文
2014/03/09 职场文书
表彰大会主持词
2014/03/26 职场文书
环境整治工作方案
2014/05/18 职场文书
企业员工集体活动方案
2014/08/17 职场文书
六一亲子活动感想
2015/08/07 职场文书
高中语文教学反思范文
2016/02/16 职场文书