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与iframe的那些事儿
Jul 04 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
微信小程序实现animation动画
Jan 26 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
出纳岗位职责模板
2013/11/27 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
销售会计岗位职责
2014/03/15 职场文书
倡议书格式
2014/04/14 职场文书
初三学生评语大全
2014/04/24 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
庆国庆活动总结
2014/08/28 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python