jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
更新時(shí)間：2015年03月28日 10:38:31 投稿：junjie
這篇文章主要介紹了jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式,本文用詳細(xì)的代碼實(shí)例講解jquery表單驗(yàn)證插件的使用,需要的朋友可以參考下
jquery 驗(yàn)證非常簡單，下面總結(jié)常用的三種方式：
第一種方式：也是比較標(biāo)準(zhǔn)的方式：
首先引入jquery 插件和 jquery 驗(yàn)證插件：
第一步：引入插件
復(fù)制代碼 代碼如下:
<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>
第二步： 定義表單的錯誤輸出：
復(fù)制代碼 代碼如下:
<style type="text/css">
#frm label.error {
color: Red;
}
</style>
第三步：添加錯誤處理方法；
jquery驗(yàn)證，需要有：
1：定義驗(yàn)證方法
2：添加驗(yàn)證規(guī)則
下面貼出常用的驗(yàn)證小例子，一看就明白了。
先看效果圖：
<!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}數(shù)字")
}
}
});
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}個字節(jié)(一個中文字算2個字節(jié))"));
jQuery.validator.addMethod("numFormat",function(value,element,param){
return this.optional(element) || /^\d*$/.test(value);
}
//,$.validator.format("請輸入數(shù)字{0}位以內(nèi)")
);
//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("請輸入合法數(shù)字,精度格式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("請輸入字母或數(shù)字")
);
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>數(shù) 字 :
<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>
這是一個完整的驗(yàn)證示例，關(guān)于引入的代碼已經(jīng)上傳，可以點(diǎn)擊下載
下面講解其中的重點(diǎn)方法：
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}個字節(jié)(一個中文字算2個字節(jié))"));
jQuery.validator.addMethod() 方法，有三個參數(shù),
第一個參數(shù) ： “byteMaxLength” 是定義方法名，必須保證方法名唯一，是一個identifier標(biāo)志。
第二個參數(shù)： 是下面這個回調(diào)（callback）函數(shù)：
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);
}
回調(diào)函數(shù)有三個參數(shù)：
第一個：value ，是當(dāng)前驗(yàn)證的元素的值。
第二個： element 是當(dāng)前被驗(yàn)證的元素。
第三個：是傳入的參數(shù)，例如： min : 5 這個參數(shù)為5， 對于本方法調(diào)用的時(shí)候，例如：byteMaxLength：10 其中10為傳入?yún)?shù)。
這個方法的方法名為： byteMaxLength 回調(diào)函數(shù)如上，
回調(diào)函數(shù)的作用就是驗(yàn)證輸入的為多少個字節(jié)，其中一個漢字代表兩個字符，字符為0-127的ASCII碼，其中有一句返回：
return this.optional(element) 這個函數(shù)調(diào)用的意思是： 用于表單輸入值不為空時(shí)驗(yàn)證，當(dāng)field為空時(shí)，即element的值為空，this.optional(element) = true, 就是說該filed不是必填項(xiàng)，當(dāng)不填時(shí)也通過驗(yàn)證， 如果element的值不為空 this.optional(element) = false 就要根據(jù) || 后面的驗(yàn)證來判斷返回為true 或false的目的，總結(jié)起來 this.optional(element) 就是為了說明 當(dāng)前驗(yàn)證的 field不是必填項(xiàng)。
第三個參數(shù)： 如下：
復(fù)制代碼 代碼如下:
$.validator.format("不能超過{0}個字節(jié)(一個中文字算2個字節(jié))")
這第三個參數(shù)可以直接是一個message 就是驗(yàn)證的提示信息， 為了顯示函數(shù)的驗(yàn)證的信息，這個參數(shù)也可以通過創(chuàng)建函數(shù)jQuery.validator.format(value)來顯示，其中 {0} 代表 該方法 的參數(shù)如果 方法調(diào)用如: byteMaxLength : 10 上面的輸入就是 不能超過10個字節(jié)，（一個中文字算兩個字節(jié)）
下面看一下這段代碼：
$( "#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}數(shù)字")
}
}
});
首先這是一個方法調(diào)用
復(fù)制代碼 代碼如下:
$( "#frm" ).validate([options]）
驗(yàn)證選擇的表單，方法的參數(shù)是可選項(xiàng)，可以輸入0個或者鍵值對（key/value）
這個方法是為了 處理例如：submit , focus , keyup , blur, click 觸發(fā)驗(yàn)證的，對象是整個表單的元素，或者是單個元素，使用rules和 messages 定義驗(yàn)證的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的錯誤信息顯示。
下面看 validate 的方法 rules();
返回 第一個選擇的元素的驗(yàn)證的規(guī)則， 有若干種方式定義驗(yàn)證規(guī)則。
rules 方法定義了基于id的驗(yàn)證，
復(fù)制代碼 代碼如下:
username: {
required: true,
minlength: 4,
maxlength: 20,
byteMaxLength:20,
valiEnglish:true
}
如上：其中，username為 id名， {}中為定義的驗(yàn)證方法，就是這個id 的都需要哪些方法驗(yàn)證，方法名就是上面講到的方法；
這樣就定義了。
messages中定義了 ：
復(fù)制代碼 代碼如下:
username: {
required: "請輸入用戶名4--20個英文字符",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}
這個id中方法驗(yàn)證錯誤提示信息。其中可以直接輸出message或者調(diào)用 $.format()方法。
上面的標(biāo)準(zhǔn)格式就是：
復(fù)制代碼 代碼如下:
var $params = {debug:false, rules:{}, messages:{}};
$("#frm").validate($params);
rules{}中定義驗(yàn)證規(guī)則的方法。 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}個字節(jié)(一個中文字算2個字節(jié))"));
jQuery.validator.addMethod("numFormat",function(value,element,param){
return this.optional(element) || /^\d*$/.test(value);
},$.validator.format("請輸入數(shù)字{0}位以內(nèi)")
);
//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("請輸入合法數(shù)字,精度格式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("請輸入字母或數(shù)字")
);
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>數(shù) 字 :
<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>
以上為第二種方式的代碼：其中：
方法定義和第一種一樣：在于調(diào)用：
復(fù)制代碼 代碼如下:
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表單中需要驗(yàn)證的id進(jìn)行驗(yàn)證：
其中用到了.attr() 方法：這個方法有很多種參數(shù)形式 .attr(attributeName,value)方法
attributeName為參數(shù)名： value 為參數(shù)值
其中下面means 是為 id為username的 元素 的 class 屬性 添加值：
復(fù)制代碼 代碼如下:
"{byteMaxLength:22,valiEnglish:true}"
復(fù)制代碼 代碼如下:
$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");
這樣該id元素就有了驗(yàn)證。
注意： 在自定義的check_infor()調(diào)用之前 ，必須首先調(diào)用$("#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}個字節(jié)(一個中文字算2個字節(jié))"));
jQuery.validator.addMethod("numFormat",function(value,element,param){
return this.optional(element) || /^\d*$/.test(value);
},$.validator.format("請輸入數(shù)字{0}位以內(nèi)")
);
//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("請輸入合法數(shù)字,精度格式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("請輸入字母或數(shù)字")
);
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>數(shù) 字 :
<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>
第三種方式與其他兩種方式不同的地方就是：
復(fù)制代碼 代碼如下:
$('#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});
為每一個單獨(dú)的元素添加驗(yàn)證規(guī)則。其中調(diào)用了rules( "add", rules )方法：
增加驗(yàn)證規(guī)則為匹配的元素。
注意：$("form").validate()方法必須首先被調(diào)用。
這個規(guī)則也能包含一個messages-object，定義常用的messages。
您可能感興趣的文章:
- jquery validate 實(shí)現(xiàn)動態(tài)增加/刪除驗(yàn)證規(guī)則操作示例
- jQuery Validate插件ajax方式驗(yàn)證輸入值的實(shí)例
- jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則
- JQuery validate 驗(yàn)證一個單獨(dú)的表單元素實(shí)例
- 詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證 （正則表達(dá)式）
- jQuery驗(yàn)證插件validate使用方法詳解
- jQuery validate(submitHandler函數(shù))驗(yàn)證通過發(fā)送Ajax(實(shí)例詳解)
相關(guān)文章
jQuery實(shí)現(xiàn)購物車的總價(jià)計(jì)算和總價(jià)傳值功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)購物車的總價(jià)計(jì)算和總價(jià)傳值功能 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
開發(fā)網(wǎng)站少不了要經(jīng)常用彈出窗口的形式，今天在網(wǎng)上搜了個小插件LeanModal，記錄于此，方便自己，亦方便他人使用2012-03-03
這篇文章主要為大家介紹了jQuery中DOM 屬性使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號大小效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號大小效果,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jquery.form.js清空form的方法,需要的朋友可以參考下2014-03-03
jquery得到font-size屬性值實(shí)現(xiàn)代碼
font-size屬性想必大家并不陌生吧，此屬性控制字體的大小，在本文將為大家介紹下如何使用jquery獲取font-size屬性值，感興趣的朋友可以參考下2013-09-09
在用Maxthon的時(shí)候無意看到一個浮動框，把它改成基于jquery的，擴(kuò)展性比較好，發(fā)來分享下。2010-08-08
這篇文章主要介紹了jQuery切換所有復(fù)選框選中狀態(tài)的方法,可實(shí)現(xiàn)批量切換復(fù)選框選中狀態(tài)的功能,需要的朋友可以參考下2015-07-07
兼容BackCompat,CSS1Compat兩模式渲染的頁面,測試的瀏覽器 :friefox ie678 chrome opera2011-02-02
jQuery實(shí)現(xiàn)方法的鏈?zhǔn)讲僮魇欠浅Ｈ菀椎?。這里給出正確的使用方法2014-01-01