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 miscellanea -display data real time, using window.status
Jan 09 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
微信小程序登录session的使用
Mar 17 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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 数组实例说明
2008/08/18 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php权重计算方法代码分享
2014/01/09 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP钩子实现方法解析
2019/05/21 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python和C语言混合编程实例
2014/06/04 Python
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
pandas数值计算与排序方法
2018/04/12 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python绘制组合图的示例
2020/09/18 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
前台接待岗位职责
2013/12/03 职场文书
争论的故事教学反思
2014/02/06 职场文书
物理学专业求职信
2014/07/04 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python