首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery表单验证插件（jquery.validate.js）的3种使用方式

Posted in Javascript onMarch 28, 2015

jquery  验证非常简单，下面总结常用的三种方式：

第一种方式：也是比较标准的方式：

首先引入jquery  插件和 jquery 验证插件：

第一步：引入插件

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript" src="js/jquery.metadata.js"></script>

<script type="text/javascript" src="js/messages_zh.js"></script>

第二步： 定义表单的错误输出： 
<style type="text/css">

#frm label.error {

color: Red;

}

</style>

第三步：添加错误处理方法；

jquery验证，需要有：

1：定义验证方法
2：添加验证规则

下面贴出常用的验证小例子，一看就明白了。

先看效果图：

jquery表单验证插件（jquery.validate.js）的3种使用方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
	#frm label.error {
		color: Red;
	}
</style>
</head>
<script type="text/javascript">

$(document).ready(function(){
  $("#clickme").click(function(){
     alert("Hello World");
 });
 
 
 
  $( "#frm" ).validate({
      rules: {
          username: {
              required: true,
              minlength: 4,
              maxlength: 20,
              byteMaxLength:20,
              valiEnglish:true
          },
          postcode: {
          	 postcodeVal:true
          	},
          number: {
          	byteMaxLength:5,
          	numFormat:5
          	},
          	identifier: {
          	sfzhValidate:true	
          }
          	
          	
          
      },
      messages: {
          username: {
              required: "请输入用户名4--20个英文字符",
              minlength: $.format("Keep typing, at least {0} characters required!"),
              maxlength: $.format("Whoa! Maximum {0} characters allowed!")
          },
          number: {
          	  numFormat: $.format("请输入{0}数字")
          	}
      }
  });
 
 
 
 jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
 
 jQuery.validator.addMethod("numFormat",function(value,element,param){
			 return this.optional(element) || /^\d*$/.test(value);
			}
			//,$.validator.format("请输入数字{0}位以内")
			);
			
			
			 
			//number(9,3)
			jQuery.validator.addMethod("numFormat63",function(value,element){
			 return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
			},$.validator.format("请输入合法数字,精度格式123456.0")
			);
			
			
			jQuery.validator.addMethod("postcodeVal",function(value,element){
			 return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);
			},$.validator.format("请输入合法的邮编")
			);
			
			jQuery.validator.addMethod("numberAndLettersVal",function(value,element){
			 return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
			},$.validator.format("请输入字母或数字")
			);
			
			
			
			jQuery.validator.addMethod("sfzhValidate",function(value,element){
			 return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
			},$.validator.format("请输入合法身份证号")
			);
			
			
			
			jQuery.validator.addMethod("valiEnglish",function(value,element){
			 return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
			},$.validator.format("请输入字母或者空格")
			);
		

});


</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
  <input type="text" name="username" id="username" />
</label>
 <p>
  <label>邮    编 :<label></label></label>
  <label>
  <input type="text" name="postcode" id="postcode" />
  <br />
  </label>
 </p>
 <p><label>数   字 : 
  <input type="text" name="number" id="number" />
 </label>
  <br /><label>身份证号：
  <input type="text" name="identifier" id="identifier" />
  </label>
   
 <label>
 <input type="button" name="clickme" id="clickme" value="click me" />
 </label>
 </p>
</form>
</body>
</html>

这是一个完整的验证示例，关于引入的代码已经上传，可以点击下载
下面讲解其中的重点方法：

jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));

jQuery.validator.addMethod() 方法，有三个参数,
第一个参数 ：   “byteMaxLength”  是定义方法名，必须保证方法名唯一，是一个identifier标志。
第二个参数： 是下面这个回调（callback）函数：

function(value,	element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}

回调函数有三个参数：

第一个：value ，是当前验证的元素的值。
第二个： element  是当前被验证的元素。
第三个：是传入的参数，例如： min : 5  这个参数为5，   对于本方法调用的时候，例如：byteMaxLength：10  其中10为传入参数。

这个方法的方法名为： byteMaxLength  回调函数如上，
回调函数的作用就是验证输入的为多少个字节，其中一个汉字代表两个字符，字符为0-127的ASCII码，其中有一句返回：
return  this.optional(element)   这个函数调用的意思是： 用于表单输入值不为空时验证，当field为空时，即element的值为空，this.optional(element) = true, 就是说该filed不是必填项，当不填时也通过验证， 如果element的值不为空  this.optional(element) = false 就要根据  ||  后面的验证来判断返回为true 或false的目的，总结起来 this.optional(element) 就是为了说明  当前验证的 field不是必填项。

第三个参数：  如下：

$.validator.format("不能超过{0}个字节(一个中文字算2个字节)") 

这第三个参数可以直接是一个message 就是验证的提示信息，  为了显示函数的验证的信息，这个参数也可以通过创建函数jQuery.validator.format(value)来显示，其中 {0} 代表 该方法 的参数如果  方法调用如: byteMaxLength : 10  上面的输入就是 不能超过10个字节，（一个中文字算两个字节）

下面看一下这段代码：

$( "#frm" ).validate({
      rules: {
          username: {
              required: true,
              minlength: 4,
              maxlength: 20,
              byteMaxLength:20,
              valiEnglish:true
          },
          postcode: {
          	 postcodeVal:true
          	},
          number: {
          	byteMaxLength:5,
          	numFormat:5
          	},
          	identifier: {
          	sfzhValidate:true	
          }
          	
          	
          
      },
      messages: {
          username: {
              required: "请输入用户名4--20个英文字符",
              minlength: $.format("Keep typing, at least {0} characters required!"),
              maxlength: $.format("Whoa! Maximum {0} characters allowed!")
          },
          number: {
          	  numFormat: $.format("请输入{0}数字")
          	}
      }
  });

首先这是一个方法调用

$( "#frm" ).validate([options]） 

验证选择的表单，方法的参数是可选项，可以输入0个或者键值对（key/value）
这个方法是为了 处理例如：submit , focus ,  keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使用rules和 messages 定义验证的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的错误信息显示。

下面看 validate 的方法  rules();

返回 第一个选择的元素的验证的规则， 有若干种方式定义验证规则。

rules 方法定义了基于id的验证，

  username: {

                           required: true,

                           minlength: 4,

                           maxlength: 20,

                           byteMaxLength:20,

                           valiEnglish:true

                   }

如上：其中，username为 id名， {}中为定义的验证方法，就是这个id 的都需要哪些方法验证，方法名就是上面讲到的方法；

这样就定义了。

messages中定义了 ：

  username: {

                           required: "请输入用户名4--20个英文字符",

                           minlength: $.format("Keep typing, at least {0} characters required!"),

                           maxlength: $.format("Whoa! Maximum {0} characters allowed!")

                   }

这个id中方法验证错误提示信息。其中可以直接输出message或者调用 $.format()方法。

上面的标准格式就是：

var $params = {debug:false, rules:{}, messages:{}};

 $("#frm").validate($params);

rules{}中定义验证规则的方法。 messages{}定义错误输出。
以上为第一种方式：

第二种方式：和第一种基本差不多：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
	#frm label.error {
		color: Red;
	}
</style>
</head>
<script type="text/javascript">

$(document).ready(function(){
  $("#clickme").click(function(){
     alert("Hello World");
 });
 
 
 jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
 
 jQuery.validator.addMethod("numFormat",function(value,element,param){
			 return this.optional(element) || /^\d*$/.test(value);
			},$.validator.format("请输入数字{0}位以内")
			);
			
			
			 
			//number(9,3)
			jQuery.validator.addMethod("numFormat63",function(value,element){
			 return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
			},$.validator.format("请输入合法数字,精度格式123456.0")
			);
			
			
			jQuery.validator.addMethod("postcodeVal",function(value,element){
			 return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);
			},$.validator.format("请输入合法的邮编")
			);
			
			jQuery.validator.addMethod("numberAndLettersVal",function(value,element){
			 return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
			},$.validator.format("请输入字母或数字")
			);
			
			
			
			jQuery.validator.addMethod("sfzhValidate",function(value,element){
			 return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
			},$.validator.format("请输入合法身份证号")
			);
			
			
			
			jQuery.validator.addMethod("valiEnglish",function(value,element){
			 return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
			},$.validator.format("请输入字母或者空格")
			);
			
			$("#frm").validate();
		
			check_infor();

});

function check_infor(){
	
	 $("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");
  $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");
  
  
  $("#number").attr("class","{byteMaxLength:6,numFormat:6}");
  $("#identifier").attr("class","{sfzhValidate:true}");
	 
	
	
	}


</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
  <input type="text" name="username" id="username" />
</label>
 <p>
  <label>邮    编 :<label></label></label>
  <label>
  <input type="text" name="postcode" id="postcode" />
  <br />
  </label>
 </p>
 <p><label>数   字 : 
  <input type="text" name="number" id="number" />
 </label>
  <br /><label>身份证号：
  <input type="text" name="identifier" id="identifier" />
  </label>
   
 <label>
 <input type="button" name="clickme" id="clickme" value="click me" />
 </label>
 </p>
</form>
</body>
</html>

以上为第二种方式的代码：其中：
方法定义和第一种一样：在于调用：

function check_infor(){

 

  $("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");

   $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");

   

   

    $("#number").attr("class","{byteMaxLength:6,numFormat:6}");

    $("#identifier").attr("class","{sfzhValidate:true}");

 

 }

其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证：
其中用到了.attr()  方法：这个方法有很多种参数形式 .attr(attributeName,value)方法
attributeName为参数名：  value 为参数值
其中下面means 是为 id为username的 元素 的 class 属性 添加值：

"{byteMaxLength:22,valiEnglish:true}" 

$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}"); 

这样该id元素就有了验证。

注意： 在自定义的check_infor()调用之前 ，必须首先调用$("#frm").valudate();方法；

第三种方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
	#frm label.error {
		color: Red;
	}
</style>
</head>
<script type="text/javascript">

$(document).ready(function(){
  $("#clickme").click(function(){
     alert("Hello World");
 });
  
  jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
 
  jQuery.validator.addMethod("numFormat",function(value,element,param){
			 return this.optional(element) || /^\d*$/.test(value);
			},$.validator.format("请输入数字{0}位以内")
			);
			
			
			 
			//number(9,3)
			jQuery.validator.addMethod("numFormat63",function(value,element){
			 return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
			},$.validator.format("请输入合法数字,精度格式123456.0")
			);
			
			
			jQuery.validator.addMethod("postcodeVal",function(value,element){
			 return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);
			},$.validator.format("请输入合法的邮编")
			);
			
			jQuery.validator.addMethod("numberAndLettersVal",function(value,element){
			 return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
			},$.validator.format("请输入字母或数字")
			);
			
			
			
			jQuery.validator.addMethod("sfzhValidate",function(value,element){
			 return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
			},$.validator.format("请输入合法身份证号")
			);
			
			
			
			jQuery.validator.addMethod("valiEnglish",function(value,element){
			 return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
			},$.validator.format("请输入字母或者空格")
			);
			
	 	$("#frm").validate();
		$('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true});
        $('#postcode').rules('add', { postcodeVal:true});
        $('#number').rules('add', { byteMaxLength:5,numFormat:5});
        $('#identifier').rules('add', { sfzhValidate:true});
 
		
});




</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
  <input type="text" name="username" id="username" />
</label>
 <p>
  <label>邮    编 :<label></label></label>
  <label>
  <input type="text" name="postcode" id="postcode" />
  <br />
  </label>
 </p>
 <p><label>数   字 : 
  <input type="text" name="number" id="number" />
 </label>
  <br /><label>身份证号：
  <input type="text" name="identifier" id="identifier" />
  </label>
   
 <label>
 <input type="button" name="clickme" id="clickme" value="click me" />
 </label>
 </p>
</form>
</body>
</html>

第三种方式与其他两种方式不同的地方就是：

                $('#username').rules('add', { required: true,  byteMaxLength:20,valiEnglish:true});

                $('#postcode').rules('add', { postcodeVal:true});

                $('#number').rules('add', { byteMaxLength:5,numFormat:5});

                $('#identifier').rules('add', { sfzhValidate:true});

为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法：
增加验证规则为匹配的元素。
注意：$("form").validate()方法必须首先被调用。
这个规则也能包含一个messages-object，定义常用的messages。

jquery表单验证插件（jquery.validate.js）的3种使用方式

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
js原型链与继承解析（初体验）
May 09 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
原生JS实现《别踩白块》游戏（兼容IE）
Feb 20 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 #Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 #Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 #Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 #Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 #Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 #Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 #Javascript
线程(1) 连接数(1) 弱口令(1) PV(1) jenkins(1) UV(1) 进程假死(1) 内存(1) 访问日志(2) ipv6(1)
You might like
详解EventDispatcher事件分发组件
2016/12/25 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python中from module import * 的一个坑
2014/07/20 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python调用win32接口进行截图的示例
2020/11/11 Python
墨西哥网上购物：Linio墨西哥
2016/10/20 全球购物
英国办公家具网站：Furniture At Work
2019/10/07 全球购物
意大利文具和办公产品在线商店：Y-Office
2020/02/27 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
学习心得体会
2014/01/01 职场文书
投标邀请书范文
2014/01/31 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
国际贸易求职信
2014/07/05 职场文书
博士生专家推荐信
2014/09/26 职场文书
硕士学位论文评语
2014/12/31 职场文书
面试感谢信范文
2015/01/22 职场文书
党员个人自我评价
2015/03/03 职场文书
个人简历求职信范文
2015/03/20 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS