jQuery.Validate 使用筆記(jQuery Validation范例 )
更新時(shí)間：2010年06月25日 19:50:45 作者：
學(xué)習(xí)jQuery Validation，于是手寫一公共范例，并收藏以便后用,里面附有測試代碼，需要的朋友一起來測試。
驗(yàn)證操作類formValidatorClass.js
/**
* @author ming
*/
$(document).ready(function(){
/**//* 設(shè)置默認(rèn)屬性 */
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
// 字符驗(yàn)證
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、數(shù)字和下劃線");
// 中文字兩個(gè)字節(jié)
jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1] );
}, "請確保輸入的值在3-15個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))");
// 身份證號碼驗(yàn)證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "請正確輸入您的身份證號碼");
// 手機(jī)號碼驗(yàn)證
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機(jī)號碼");
// 電話號碼驗(yàn)證
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //電話號碼格式010-12345678
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的電話號碼");
// 聯(lián)系電話(手機(jī)/電話皆可)驗(yàn)證
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "請正確填寫您的聯(lián)系電話");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
//開始驗(yàn)證
$('#submitForm').validate({
/**//* 設(shè)置驗(yàn)證規(guī)則 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/**//* 設(shè)置錯(cuò)誤信息 */
messages: {
username: {
required: "請?zhí)顚懹脩裘?,
stringCheck: "用戶名只能包括中文字、英文字母、數(shù)字和下劃線",
byteRangeLength: "用戶名必須在3-15個(gè)字符之間(一個(gè)中文字算2個(gè)字符)"
},
email:{
required: "請輸入一個(gè)Email地址",
email: "請輸入一個(gè)有效的Email地址"
},
phone:{
required: "請輸入您的聯(lián)系電話",
isPhone: "請輸入一個(gè)有效的聯(lián)系電話"
},
address:{
required: "請輸入您的聯(lián)系地址",
stringCheck: "請正確輸入您的聯(lián)系地址",
byteRangeLength: "請?jiān)攲?shí)您的聯(lián)系地址以便于我們聯(lián)系您"
}
},
/**//* 設(shè)置驗(yàn)證觸發(fā)事件 */
focusInvalid: false,
onkeyup: false,
/**//* 設(shè)置錯(cuò)誤信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},
});
});
測試頁index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery驗(yàn)證</title>
<script src="lib/jquery/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery/messages_cn.js"></script>
<script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script>
<style type="text/css">
* {}{
font-family: Verdana;
font-size: 96%;
}
label {}{
width: 10em;
float: left;
}
label.error {}{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {}{
clear: both;
}
.submit {}{
margin-left: 12em;
}
em {}{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
</head>
<body>
<form class="submitForm" id="submitForm" method="get" action="">
<fieldset>
<legend>表單驗(yàn)證</legend>
<p>
<label for="username">用戶名</label>
<em>*</em><input id="userName" name="username" size="25" />
</p>
<p>
<label for="email">E-Mail</label>
<em>*</em><input id="email" name="email" size="25" />
</p>
<p>
<label for="phone">聯(lián)系電話</label>
<em>*</em><input id="phone" name="phone" size="25" value="" />
</p>
<p>
<label for="address">地址</label>
<em>*</em><input id="address" name="address" size="22">
</p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
校驗(yàn)規(guī)則參數(shù)
格式為; name:{rule1, rule2 ....} name 要使用input 標(biāo)簽的name，之前，錯(cuò)誤理解為 ID 了；
提示信息使用 alert 輸出:
errorPlacement: function (error, element) {
if (error[0].textContent){
Alert(error[0].textContext);
}
else {
Alert(error[0].innerText);
}
}
復(fù)制代碼 代碼如下:
/**
* @author ming
*/
$(document).ready(function(){
/**//* 設(shè)置默認(rèn)屬性 */
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
// 字符驗(yàn)證
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、數(shù)字和下劃線");
// 中文字兩個(gè)字節(jié)
jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1] );
}, "請確保輸入的值在3-15個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))");
// 身份證號碼驗(yàn)證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "請正確輸入您的身份證號碼");
// 手機(jī)號碼驗(yàn)證
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機(jī)號碼");
// 電話號碼驗(yàn)證
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //電話號碼格式010-12345678
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的電話號碼");
// 聯(lián)系電話(手機(jī)/電話皆可)驗(yàn)證
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "請正確填寫您的聯(lián)系電話");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
//開始驗(yàn)證
$('#submitForm').validate({
/**//* 設(shè)置驗(yàn)證規(guī)則 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/**//* 設(shè)置錯(cuò)誤信息 */
messages: {
username: {
required: "請?zhí)顚懹脩裘?,
stringCheck: "用戶名只能包括中文字、英文字母、數(shù)字和下劃線",
byteRangeLength: "用戶名必須在3-15個(gè)字符之間(一個(gè)中文字算2個(gè)字符)"
},
email:{
required: "請輸入一個(gè)Email地址",
email: "請輸入一個(gè)有效的Email地址"
},
phone:{
required: "請輸入您的聯(lián)系電話",
isPhone: "請輸入一個(gè)有效的聯(lián)系電話"
},
address:{
required: "請輸入您的聯(lián)系地址",
stringCheck: "請正確輸入您的聯(lián)系地址",
byteRangeLength: "請?jiān)攲?shí)您的聯(lián)系地址以便于我們聯(lián)系您"
}
},
/**//* 設(shè)置驗(yàn)證觸發(fā)事件 */
focusInvalid: false,
onkeyup: false,
/**//* 設(shè)置錯(cuò)誤信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},
});
});
測試頁index.html
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery驗(yàn)證</title>
<script src="lib/jquery/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery/messages_cn.js"></script>
<script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script>
<style type="text/css">
* {}{
font-family: Verdana;
font-size: 96%;
}
label {}{
width: 10em;
float: left;
}
label.error {}{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {}{
clear: both;
}
.submit {}{
margin-left: 12em;
}
em {}{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
</head>
<body>
<form class="submitForm" id="submitForm" method="get" action="">
<fieldset>
<legend>表單驗(yàn)證</legend>
<p>
<label for="username">用戶名</label>
<em>*</em><input id="userName" name="username" size="25" />
</p>
<p>
<label for="email">E-Mail</label>
<em>*</em><input id="email" name="email" size="25" />
</p>
<p>
<label for="phone">聯(lián)系電話</label>
<em>*</em><input id="phone" name="phone" size="25" value="" />
</p>
<p>
<label for="address">地址</label>
<em>*</em><input id="address" name="address" size="22">
</p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
校驗(yàn)規(guī)則參數(shù)
格式為; name:{rule1, rule2 ....} name 要使用input 標(biāo)簽的name，之前，錯(cuò)誤理解為 ID 了；
提示信息使用 alert 輸出:
復(fù)制代碼 代碼如下:
errorPlacement: function (error, element) {
if (error[0].textContent){
Alert(error[0].textContext);
}
else {
Alert(error[0].innerText);
}
}
您可能感興趣的文章:
- jquery表單驗(yàn)證插件validation使用方法詳解
- 詳解jQuery的表單驗(yàn)證插件--Validation
- JQuery.validationEngine表單驗(yàn)證插件(推薦)
- jQuery插件Validation快速完成表單驗(yàn)證的方式
- jquery validation插件表單驗(yàn)證的一個(gè)例子
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jquery validation驗(yàn)證身份證號,護(hù)照,電話號碼,email(實(shí)例代碼)
- jQuery驗(yàn)證插件validation使用指南
- jQuery插件Validation表單驗(yàn)證詳解
相關(guān)文章
Jquery判斷radio、selelct、checkbox是否選中及獲取選中值方法總結(jié)
這篇文章主要介紹了Jquery判斷radio、selelct、checkbox是否選中及獲取選中值方法總結(jié),本文總結(jié)的比較簡潔直白,看到的朋友按需索取,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery過濾選擇器用法,實(shí)例分析了:first、:last、:odd、:even等等常用的過濾選擇器的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)的移動端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了Jquery判斷頁面圖片是否加載失敗,加載失敗則顯示默認(rèn)圖片的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-06-06
jquery控制背景音樂開關(guān)與自動播放提示音的方法
這篇文章主要介紹了jquery控制背景音樂開關(guān)與自動播放提示音的方法,實(shí)例分析了背景音樂開關(guān)的技巧與自動播放提示音的常見用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery ajax調(diào)用webservice注意事項(xiàng)
這篇文章主要為大家詳細(xì)介紹了jQuery ajax調(diào)用webservice的注意事項(xiàng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
jquery動態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
這里我只是隨便做了下，上面是照片列表和兩個(gè)按鈕，單擊小圖片下面顯示大圖片，當(dāng)點(diǎn)擊按鈕時(shí)可以查看下一頁，上一頁的圖片。2011-08-08
下面小編就為大家?guī)硪黄獪\談jquery拼接字符串效率比較高的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了通過JQuery如何獲取表格數(shù)據(jù)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門知識，該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定義方法的 API，感興趣的小伙伴們可以參考一下2015-12-12