jQuery验证插件

jQuery验证插件
原文:jQuery验证插件

学习要点:
1.使用 validate.js 插件
2.默认验证规则
3.validate()方法和选项
4.validate.js 其他功能

 

 

验证插件(validate.js),是一款验证常规表单数据合法性的插件。使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验。

 

一.使用 validate.js 插件
官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是validate.js,还有两个可选的辅助文件:additional-methods.js(控件 class方式)和 message_zh.js(提示汉化)文件(实际使用,请使用 min 压缩版) 。

第一步:引入 validate.js
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步:在 JS 文件中执行
$('#reg').validate();

二.默认验证规则
Validate.js 的默认验证规则的写法有两种形式:1.控件属性方式;2.JS 键值对传参方式。

//使用控件方式验证“必填和不得小于两位”

<input type="text" class="required" minlength="2" name="user" id="user" />

注意:默认规则里设置布尔值的,直接写到 class 里即可实现。如果是数字或数组区间,直接使用属性=值的方式即可。而对于错误提示,可以引入中文汉化文件,或直接替换掉即可。
//使用 JS 对象键值对传参方式设置

 1 $('#reg').validate({
 2 rules : {
 3     user : {                          //只有一个规则的话,
 4         required : true,             //直接 user : 'required',
 5         minlength : 2,
 6     },
 7 },
 8     messages : {
 9         user : {
10             required : '帐号不得为空!',
11             minlength : '帐号不得小于 2 位!',
12         },
13     }
14 });

 


注意:由于第一种形式不能设置指定的错误提示信息。我们推荐使用第二种形式,第二种形式也避免的 HTML 污染。


//所有规则演示

 1 $('#reg').validate({
 2       rules : {
 3         email : {
 4             email : true,
 5         },
 6         url : {
 7             url : true,
 8         },
 9         date : {
10             date : true,
11         },
12         dateIOS : {
13             dateIOS : true,
14         },
15         number : {
16             number : true,
17         }
18          digits : {
19             digits : true,
20         },
21         creditcard : {
22             creditcard : true,
23         },
24         min : {
25             min : 5,
26         },
27         range : {
28             range : [5, 10],
29         },
30         rangelength : {
31            rangelength : [5,10],
32         },
33         notpass : {
34             equalTo : '#pass', //这里的 To 是大写的 T
35         }
36     },
37 })

 

 

三.validate()的方法和选项
除了默认的验证规则外,validate.js 还提供了大量的其他属性和方法供开发者使用。比如,调试属性,错误提示位置一系列比较有用的选项。
//jQuery.format 格式化错误提示

 1 $('#reg').validate({
 2     rules : {
 3         user : {
 4             required : true,
 5             minlength : 5,
 6             rangelength : [5,10]
 7         },
 8     },
 9     messages : {
10         user : {
11             required : '帐号不得为空!',
12             minlength : jQuery.format('帐号不得小于{0}位!'),
13             rangelength : jQuery.format('帐号限制在{0}-{1}位!'),
14         },
15     },
16 });

 


//开启调试模式禁止提交
$('#reg').validate({
  debug : true,
});


//设置调试模式为默认,可以禁止多个表单提交
$.validator.setDefaults({
  debug : true,   //仍可以正常验证,但是为了方便调试不会提交到指定页面
});


//使用其他方式代替默认提交
submitHandler : function (form) {
  //可以执行 ajax 提交,并且无须 debug:true 阻止提交了
},


//忽略某个字段验证
ignore : '#pass',


//群组错误提示
groups : {
myerror : 'user pass',
},


//显示群组的错误提示
focusInvalid : false,
errorPlacement : function (error, element) {
  $.each(error, function (index, value) {
    $('.myerror').html($('.myerror').html() + $(value).html());
  })
},


//群组错误提示,分开
groups : {
  error_user : 'user',
  error_pass : 'pass'
},


//将群组的错误指定存放位置(推荐!!)

1 errorPlacement : function (error, element) {
2   error.appendTo('.myerror');
3 },

 


//设置错误提示的 class 名

errorClass : 'error_list',


//设置错误提示的标签
errorElement : 'p',

PS:默认的class名称是“error”,默认的错误提示标签是label。


//统一包裹错误提示

(首先将错误信息标签外面再包裹一层li,然后再html文件中提前设置了错误信息显示元素class为error的ol,这两行代码就将错误信息形成了一个列表样式)
errorLabelContainer : 'ol.error',
wrapper : 'li',


//设置成功后加载的 class
success : 'success',

PS:验证成功之后会在label标签中添加一个sucess类名,然后就可以根据这个设置成功后的的css样式。另外注意:成功之后,对应的input元素里面的class值会有error变为valid,这样也可以根据这个class值设置css样式,样成功后的提示显示在input里面,而不是用success显示在input外面。

 


//使用方法加载 class 并添加文本
success : function (label) {
  label.addClass('success').text('ok');
},


//高亮显示有错误的元素,变色式
highlight: function(element, errorClass) {
  $(element).fadeOut(function() {
    $(element).fadeIn()
  })
},

 

1 //高亮显示有错误的元素,变色式
2 highlight: function(element, errorClass) {
3   $(element).css('border', '1px solid red');
4 },
5 
6 //成功的元素移出错误高亮
7 unhighlight : function (element, errorClass) {
8   $(element).css('border', '1px solid #ccc');
9 },

 


//表单提交时获取信息
invalidHandler : function (event, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    $('.myerror').html('您有' + errors + '个表单元素填写非法!');
  }
},

 1 //获取错误提示句柄,不用提交及时获取值
 2 showErrors : function (errorMap, errorList) {
 3     var errors = this.numberOfInvalids();
 4     if (errors) {
 5         $('.myerror').html('您有' + errors + '个表单元素填写非法!');
 6     } else {
 7         $('.myerror').hide();
 8     }
 9     this.defaultShowErrors();   //执行默认错误
10 },
11 
12 
13 //获取错误提示句柄,errorList
14 showErrors : function (errorMap, errorList) {
15     alert(errorList[0].message);   //得到错误信息
16     alert(errorList[0].element);   //当前错误的表单元素
17 },

 

 

四.validate.js 其他功能
使用 remote:url,可以对表单进行 ajax 验证,默认会提交当前验证的值到远程地址。如果需要提交其他的值,可以使用 data 选项。
//使用 ajax 验证

rules : {user : {required : true,minlength : 2,remote : 'user.php',},
},

 


//user.php 内容

1 <?php
2     if ($_GET['user'] == 'alex') {
3         echo 'false';
4     } else {
5         echo 'true';
6     }
7 ?>

 


注意:远程地址只能输出'true'或'false',不能输出其他值。
//同时传递多个值到远程端

 1 pass : {
 2     required : true,
 3     minlength : 6,
 4     remote : {
 5         url : 'user.php',
 6         type : 'POST',
 7         dataType : 'json',
 8         data : {
 9             user : function () {
10                 return $('#user').val();
11             },
12         },
13     },
14 },

 


//user.php 内容

1 <?php
2     if ($_POST['user'] != 'alex' || $_POST['pass'] != '123456') {
3         echo 'false';
4     } else {
5         echo 'true';
6     }
7 ?>

 

 

validate.js 提供了一些事件触发的默认值,这些值呢,大部分建议是不用更改的。
//取消提交验证
onsubmit : false, //默认是 true
注意: 设置为false 会导致直接传统提交, 不会实现验证功能, 一般是用于keyup/click/blur验证提交。

 

//设置鼠标离开不触发验证
onfocusout : false, //默认为 true


//设置键盘按下弹起不触发验证
onkeyup : false, //默认为 true

注意:只要设置了,在测试的浏览器不管是 false 还是 true 都不触发了。


//设置点击 checkbox 和 radio 点击不触发验证
onclick : false, //默认为 true


//设置错误提示后,无法获取焦点
focusInvalid : false, //默认为 true


//提示错误时,隐藏错误提示,不能和 focusInvalid 一起用,冲突
focusCleanup : true, //默认为 false
如果表单元素设置了 title 值,且 messages 为默认,就会读取 title 值的错误信息,我们可以通过 ignoreTitle : true,设置为 true,屏蔽这一个功能。

ignoreTitle : true, //默认为 false


//判断表单所验证的元素是否全部有效
alert($('#reg').valid()); //全部有效返回 true


Validate.js 提供了可以单独验证每个表单元素的 rules 方法,不但提供了 add 增加验证,还提供了 remove 删除验证的功能。


//给 user 增加一个表单验证

1 $('#user').rules('add', {
2     required : true,
3     minlength : 2,
4     messages : {
5         required : '帐号不得为空!',
6         minlength : jQuery.format('帐号不得小于{0}位!'),
7     }
8 });

 


//删除 user 的所有验证规则
$('#user').rules('remove');


//删除 user 的指定验证规则
$('#user').rules('remove', 'minlength min max');

 

 1 //添加自定义验证
 2 $.validator.addMethod('code', function (value, element) {
 3     var tel = /^[0-9]{6}$/;
 4     return this.optional(element) || (tel.test(value));
 5   }, '请正确填写您的邮政编码');
 6 
 7 //调用自定义验证
 8 rules : {
 9     code : {
10         required : true,
11         code : true,
12     }
13 }
14 
15  

 

posted on 2014-08-12 09:23 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3906507.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359631.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爱思助手更新后无法连接服务器,爱思助手出现无法连接或连接超时的操作教程...

使用爱思助手的用户很多&#xff0c;一些新用户不清楚出现无法连接或连接超时怎样处理&#xff0c;今天小编给大家带来在爱思助手出现无法连接或连接超时的操作教程&#xff0c;希望可以帮到大家。爱思助手出现无法连接或连接超时的操作教程一、数据线和电脑USB接口正常状态请确…

计算机演示题打不开,大神为你演示win7系统计算机上右键管理打不开的还原技巧...

当我们经常使用的电脑工作的时候&#xff0c;时间久了难免会遇到win7系统计算机上右键管理打不开的问题&#xff0c;如今就有用户反映在使用电脑的时候遇到win7系统计算机上右键管理打不开的情况不知怎么解决&#xff0c;针对这个问题小编就整理总结出win7系统计算机上右键管理…

apache lucene_Apache Lucene拼写检查器的“您是不是要”功能

apache luceneGoogle的“您是不是要”功能 在上一篇文章中对Lucene进行了介绍之后 &#xff0c;现在是时候提高它并创建一个更复杂的应用程序了。 您肯定最熟悉Google的“您是不是要”功能&#xff08;其他搜索引擎也支持此功能&#xff09;。 这是一个例子&#xff1a; Luce…

荣耀6手机常显示无法链接服务器怎么处理,华为手机连接上WiFi上不了网怎么办...

华为手机(Mate7,荣耀6 Plus,荣耀6,P7) 连接上WiFi上不了网怎么办每当小编被遇到这样的问题&#xff0c;小编都会深深的醉一把。这样的问题就应该被消灭在火星上&#xff0c;谁让他来地球的。网络就像一张大网&#xff0c;哪个节点有问题都可能导致WIFI连上无法上网&#xff0c;…

jboss 配置上下文路径_JBoss Portal上的“ Hello World” portlet

jboss 配置上下文路径Portlet概述 本教程将向您展示如何创建和部署简单的Portlet。 Portlet是基于Java技术的Web组件&#xff0c;可以处理请求并生成动态内容。 Portlet不是自治实体&#xff0c;但是由Portlet容器管理&#xff0c;Portlet容器为Portlet执行提供了必要的运行时…

创建型-工厂方法模式

1、工厂方法模式意图&#xff1a; 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。Factory Method使一个类的实例化延迟到其子类。 工厂方法模式用于为属于同一类别的产品定义对应的具体工厂类&#xff0c;并将具体工厂类开放给用户类来使用。 2、应用场景&…

服务器添加角色显示灰色,添加角色 web服务器 灰色

添加角色 web服务器 灰色 内容精选换一换OneAccess支持通过AD认证用户身份和控制权限。AD全称Active Directory&#xff0c;中文名称活动目录。您可以将AD简单理解成一个数据库&#xff0c;其存储有关网络对象的信息&#xff0c;方便管理员和用户查找所需信息。本文主要介绍One…

虚拟服务器关机怎么开,云服务器关机了怎么开启

云服务器关机了怎么开启 内容精选换一换开启防护后&#xff0c;您可以根据需要进行安全配置。包括配置常用登录地、常用登录IP、SSH登录IP白名单&#xff0c;开启恶意程序自动隔离查杀功能。配置常用登录地后&#xff0c;企业主机安全服务将对非常用地登录主机的行为进行告警。…

web文件怎么传到服务器,web文件传到服务器

web文件传到服务器 内容精选换一换工具中所有涉及上传文件功能的&#xff0c;如果需要上传的文件大于1GB或者解压后超过剩余磁盘空间的一半&#xff0c;则需要释放磁盘空间或手动将文件上传至服务器&#xff0c;其他情况可通过Web界面上传功能上传。Web服务端证书&#xff0c;即…

weblogic ejb_使用Oracle WebLogic对应用程序外部的EJB的引用

weblogic ejb在之前的文章中&#xff0c;我们对EJB 3.0版及其为您提供的构建Java EE应用程序的可移植机制进行了概述。 由于Java EE规范都是关于可移植性的&#xff0c;因此冒着重复自我的风险&#xff0c;我们经常强调EJB v。3.0规范上仍然存在最重要的可移植性限制&#xff1…

Android Studio显示行数

Android Studio在打开的文件左側单击鼠标右键&#xff0c;也能像Eclipse一样设置显示代码行数&#xff0c;如图1。可是这边跟Eclipse有一个非常大的差别&#xff0c;Eclipse设置后&#xff0c;其余的相应文件也跟着生效&#xff0c;即使文件关闭后又一次打开行数也还是会显示&a…

visio 小技巧

Visio作图非常的方便 目前我还是用Visio2003&#xff0c;有一些小技巧&#xff0c;记录一下。 1、visio修改文本框文字对齐方式。默认的对齐方式是上下、左右居中。修改的位置: 在一个文档中可以插入多个标签页&#xff0c;当需要分页&#xff0c;用不同页归类不同信息的时候使…

java中字符串的精确匹配_Java最佳实践–字符串性能和精确字符串匹配

java中字符串的精确匹配在使用Java编程语言时&#xff0c;我们将继续讨论与建议的实践有关的系列文章&#xff0c;我们将讨论String性能调优。 我们将专注于如何有效地处理字符串创建&#xff0c; 字符串更改和字符串匹配操作。 此外&#xff0c;我们将提供我们自己的用于精确字…

My.Ioc 代码示例——避免循环依赖

本文的目的在于通过一些示例&#xff0c;向大家说明 My.Ioc 支持哪些类型的依赖关系。也就是说&#xff0c;如何设计对象不会导致循环依赖。 在 Ioc 世界中&#xff0c;循环依赖是一个顽敌。这不仅因为它会导致 Ioc 容器抛出异常&#xff0c;而且还因为它是不可预知的&#xff…

asp.net中两款文本编辑器NicEdit和Kindeditor

分类&#xff1a; C#/ASP.Net 2012-10-09 22:35 665人阅读 评论(0) 收藏 举报 文本编辑asp.nettextboxserveraspsafari目录(?)[] 做过Web开发的朋友相信都使用过富文本编辑器&#xff0c;比较出名的CuteEditor和CKEditor很多人应该已经使用过&#xff0c;在功能强大的同时需要…

导出oracle awr分析报告,配置oracle内存参数,察看表空间使用率

cmd 命令生成awr报告: cmd 窗口 输入 -> Sqlplus sys/orclorcl as sysdba (sys登陆oracle).导出awr命令 ?/rdbms/admin/awrrpt.sql 3..输入导出的文件格式 为 html 回车 4输入数字1 为导出今天的分析报告 &#xff0c;2 3 。。。&#xff0c;回车 5.输入开始 snap id…

android多点触控自由对图片缩放

在系统的相册中,观看相片就可以用多个手指进行缩放.要实现这个功能,只需要这几步:1.新建项目,在项目中新建一个ZoomImage.javapublic class ZoomImageView extends View {//初始化状态常量public static final int STATUS_INIT1;//图片放大状态常量public static final int STA…

jboss eclipse_调试生产服务器– Eclipse和JBoss展示

jboss eclipse您是否编写有错误的代码&#xff1f; 不&#xff0c;当然不是。 对于我们其余的人&#xff0c;他们确实会编写带有bug的代码&#xff0c;我想解决一个非常敏感的问题&#xff1a;调试在生产服务器上运行的应用程序。 因此&#xff0c;您的应用程序已准备好进行部…

Chrome 控制台不完全指南

Chrome的开发者工具已经强大到没朋友的地步了&#xff0c;特别是其功能丰富界面友好的console&#xff0c;使用得当可以有如下功效&#xff1a; 更高「逼格」更快「开发调试」更强「进阶级的Frontender」Bug无处遁形「Console大法好」console.log 大家都会用log&#xff0c;但鲜…

datanucleus_DataNucleus 3.0与Hibernate 3.5

datanucleus如官方产品站点所述&#xff0c; DataNucleus Access Platform是现有的最符合标准的开源Java持久性产品。 它完全符合JDO1 &#xff0c; JDO2 &#xff0c; JDO2.1 &#xff0c; JDO2.2 &#xff0c; JDO3 &#xff0c; JPA1和JPA2 Java标准。 它还符合OGC简单功能规…