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 相关文章推荐
JS画5角星方法介绍
Sep 17 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
第十一节 重载 [11]
2006/10/09 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python检测服务器端口代码实例
2019/08/31 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
python实现canny边缘检测
2020/09/14 Python
Python用户自定义异常的实现
2020/12/25 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
2014年外联部工作总结
2014/11/17 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis
JS实现简单九宫格抽奖
2022/06/28 Javascript