2. 程式人生 > >jquery validate (jquery 驗證的三種方式)

jquery validate (jquery 驗證的三種方式)

阿新 • • 發佈：2019-01-07

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：新增驗證規則

下面貼出常用的驗證小例子，一看就明白了。

先看效果圖：


<!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圖片輪播,三種方式

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http:

jquery validate (jquery 驗證的三種方式)

http://blog.csdn.net/topwqp/article/details/8561084 jQuery 驗證非常簡單，下面總結常用的三種方式： 第一種方式：也是比較標準的方式：  首先引入jquery  外掛和 jquery 驗證外掛： 第一步：

jquery validate (jquery 驗證的三種方式)

jquery  驗證非常簡單，下面總結常用的三種方式： 第一種方式：也是比較標準的方式：  首先引入jquery  外掛和 jquery 驗證外掛： 第一步：引入外掛 <script type="text/javascript" src="js/jquery-1.6.

四十一、瀑布流佈局（js,jquery,css3三種方式）

一、 簡介 1. 實現瀑布流的方法： JavaScript 原生方法、 jquery 方法、 css3 的多欄佈局 二、js 原生方法實現 -- 思想 1. 瀑布流的特點： 等寬不等高 <

三十五、jquery動畫 無縫滾動兩種方式

無縫輪播有兩種方式，一種可以讓ul中的每個li進行移動，另外一種時令整個ul進行移動。無縫輪播效果之前用js寫過一次，以下是用jQuery分別實現這兩種方式；   一、第一種 控制每個li標籤移動實現無縫輪播 1.基本佈局樣式 2.實現自動向左輪播 採用列舉物件封裝函式的方法，封

jquery實現Ajax請求的三種方式

jquery 對 ajax的請求進行了封裝，可以使程式碼更簡潔,也自動替我們解決了，瀏覽器問題。 jquery 提供了三種 ajax 請求的函式，分別為： $.ajax() ,  $.get()  ,

jquery 呼叫 click 事件 的 三種 方式

第一種方式： $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二種方式： $('#clickmebi

jQuery中事件觸發的三種方式及區別

第一種事件觸發的方式： 呼叫文字框的獲取焦點的事件---------物件.事件名字(); eg: $("#txt").focus(); 第二種事件觸發的方式： 運用trigger方法 eg: $("#txt").trigger("focus"); 第三種事件觸

jquery 請求返回的幾種方式

問題 語句 proc 反序 cti .net 數據 請求 result 頁面代碼 <form id="form1" runat="server"> <div> <p> Ajax請求ashx返回json數據的常見問題 &l

jquery插件開發三種方法

each 視頻 jquery def lec select selector 安全 對象 1.好像之前看視頻記錄下來的，不記得了。 1 //類級別插件開發，主要是在jQuery中定義全局方法： 2 3 //第一種寫法 4 jQuery.myFunc = func

jquery函數的2種方式定義，擴展extend函數調用

函數 col TE ont 方式 bsp style -- nbsp 事件函數的2種方式 1 $.each(obj,function () { });2 $("").each(function () { }) <

jQuery Validate.js驗證手機號碼。

html: <div class="edit_phone1 tis_edit"> <form id="cell" class="form-horizontal" method="get" action=""> <div class="select_div bkb

jquery-validate.js驗證selcet、checkbox、radio

<form class="public-profile" action="/account/profile" method="post" id='public-profile-form'> <select name="like_product" class="form

原生js及jquery獲取標籤的幾種方式——為什麼id不能重複

1. 原生js獲取標籤 DOM（document object model）文字物件模型 我們在用原生js獲取標籤都離不開DOM 用原生js獲取標籤的幾種常用方法 1. 獲取標籤id document.getElementById(‘id’) 引數是id的字元，

jQuery前端基本驗證(三)

“兩個蝴蝶飛”特別喜歡"java1234知識分享網"小峰的實用主義，所以本文及其系列文章均是採用實用主義，從專案和程式碼的角度去分析。由於本人經驗有限，嘴皮子不溜，所以學術性，概念性，底層性的知識點暫時不做介紹。文章中有錯誤之處，歡迎拍磚和指點。特別感謝"java1234知識

Jquery 獲取物件的幾種方式

1、JQuery的核心的一些方法 each(callback) ‘就像迴圈 $("Element").length; ‘元素的個數，是個屬性 $("Element").size(); ’也是元素的個數，不過帶括號是個方法 $("Element").get

為jquery validate 新增驗證失敗回撥

1、jQuery Validation Plugin - v1.15.1 （此版本不支援IE8）仍然不支援 error（驗證失敗）回撥，在使用過程中非常不爽，那我們自己加上吧第240行左右：if (!c) { return this.formatAndAdd(b, e

jQuery傳送資料的3種方式

<script src="/js/jquery-1.11.3.js" ></script> <script> // 採用get方式傳送資料 functio

jQuery擷取字串的幾種方式

在我們寫前端JS程式碼的時候，我們會遇到只需要其中部分字串的時候，下面我就提供集中擷取字串的方法： 1.取字尾 var fileDir = $("#file").val(); var suf

jquery-validate remote驗證，返回不同的訊息內容

參考文件：http://www.cnblogs.com/xiawuyi/archive/2013/04/01/2990224.html 原本remote方法，後臺只會返回true或false，無法返回錯誤的資訊 現在將remote的返回內容改為json格式 String m