Vue 表单验证插件
verify
github:https://github.com/liuyinglong/verify
npm:https://www.npmjs.com/package/vue-verify-plugin
install
npm install vue-verify-plugin
use
- html
<div> <div> <input type="text" placeholder="姓名" v-verify.grow1="username" v-model="username"/> <label v-verified="verifyError.username"></label> </div> <div> <input type="password" placeholder="密码" v-verify.grow1="pwd" v-model="pwd"/> <label v-verified="verifyError.pwd"></label> </div> <button v-on:click="submit">确认</button> </div>
- js
import Vue from "vue"; import verify from "vue-verify-plugin"; Vue.use(verify); export default{ data:function(){ return { username:"", pwd:"" } }, methods:{ submit:function(){ if(this.$verify.check()){ //通过验证 } } }, verify:{ username:[ "required", { test:function(val){ if(val.length<2){ return false; } return true; }, message:"姓名不得小于2位" } ], pwd:"required" }, computed:{ verifyError:function(){ return this.$verify.$errors; } } }
指令说明
v-verify
v-erify 在表单控件元素上创建数据的验证规则,他会自动匹配要验证的值以及验证的规则。
v-verify 修饰符说明
该指令最后一个修饰符为自定义分组
//自定义teacher分组 v-verify.teacher //自定义student分组 v-verify.student //验证时可分开进行验证 //验证student 分组 this.$verify.check("student") //验证teacher 分组 this.$verify.check("teacher") //验证所有 this.$verify.check();
v-verified
v-verified 错误展示,当有错误时会展示,没有错误时会加上style:none,默认会展示该数据所有错误的第一条
该指令为语法糖(见示例)
<input v-model="username" v-verify="username"> <label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]"></label> <!--等价于--> <label v-verified="$verify.$errors.username"></label> <!--展示所有错误--> <label v-verified.join="$verify.$errors.username">
修饰符说明
.join 展示所有错误 用逗号隔开
自定义验证规则
var myRules={ phone:{ test:/^1[34578]\d{9}$/, message:"电话号码格式不正确" }, max6:{ test:function(val){ if(val.length>6) { return false } return true; }, message:"最大为6位" } } import Vue from "vue"; import verify from "vue-verify-plugin"; Vue.use(verify,{ rules:myRules });
Vue 表单验证插件的更多相关文章
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- Vue表单验证插件的制作过程
一.表单验证模块的构成 任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的. 配置: 配置规则 和配置报错,以及优先级 校验: 有在 change 事件校验, 在点击提交按钮的时候校 ...
- 一个不错的vue表单验证插件
github文档 用着不错,官方的文档例子很简单 <body> <div id="app"> <validator name="valida ...
- VeeValidate——vue2.0表单验证插件
一.vee-validate入门 vee-validate 是一个轻量级的 vue表单验证插件.它有很多开箱即用的验证规则,也支持自定义验证规则.它是基于模板的,因此它与HTML5验证API类似且熟悉 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件 - formValidator
表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...
随机推荐
- 使用Compute Shader加速Irradiance Environment Map的计算
Irradiance Environment Map基本原理 Irradiance Environment Map(也叫Irradiance Map或Diffuse Environment Map), ...
- 提交Sublime Text 插件到Package Control
最近写了一个lua智能提示的插件LuaSmartTips.这个插件一直都是自己一个人在用,昨天突然想把插件提交到Package Control,如果其他的人有这样的需求就可以直接安装. Package ...
- BOM基础(三)
在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...
- 第一章 初始java
一.单词 public:公共的 static:静态的 void:空的 class:类 print:打印 line:排 pro ...
- 同步 VS 异步
同步请求资源 请求msdn上的一个页面计算页面大小 static void Main(string[] args) { string url = "https://docs.microsof ...
- PHP数据访问修改和多条件查询(20161030)
查询分为关键字查询和准确查询 1.没有提交的时候--查所有 2.两个输入都为空--查所有3.第一个条件有,第二个为空--根据第一个条件查4.第一个没有,第二个有--根据第二个条件查5.两个都有--根据 ...
- springmvc基础学习2---简单配置文件
1:web文件 2:spring-mvc.xml配置文件
- 【SF】开源的.NET CORE 基础管理系统 -介绍篇
[SF]开源的.NET CORE 基础管理系统 -系列导航 1.环境: .NET Core SDK (https://www.microsoft.com/net/core) SQL Server or ...
- YII contoller控制器之间跳转的方法redirect
一个contoller CustomerController里怎么调用另一个controller里的action,Acontoller调用SiteContoller的actionShow($id), ...
- 模块化规范Common.js,AMD,CMD
随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖. 模块化编程称为迫切的需求. 所谓的模块,就是实 ...