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 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python获取央视节目单的实现代码
2015/07/25 Python
独特的python循环语句
2016/11/20 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python hashlib加密实现代码
2019/10/17 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
微信营销策划方案
2014/02/24 职场文书
大专毕业生求职信
2014/07/05 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
八一建军节慰问信
2015/02/14 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers