|
|
復(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] );
}, "請(qǐng)確保輸入的值在3-15個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))");
// 身份證號(hào)碼驗(yàn)證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "請(qǐng)正確輸入您的身份證號(hào)碼");
// 手機(jī)號(hào)碼驗(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));
}, "請(qǐng)正確填寫您的手機(jī)號(hào)碼");
// 電話號(hào)碼驗(yàn)證
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^/d{3,4}-?/d{7,9}$/; //電話號(hào)碼格式010-12345678
return this.optional(element) || (tel.test(value));
}, "請(qǐng)正確填寫您的電話號(hào)碼");
// 聯(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));
}, "請(qǐng)正確填寫您的聯(lián)系電話");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請(qǐng)正確填寫您的郵政編碼");
//開始驗(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: "請(qǐng)?zhí)顚懹脩裘?,
stringCheck: "用戶名只能包括中文字、英文字母、數(shù)字和下劃線",
byteRangeLength: "用戶名必須在3-15個(gè)字符之間(一個(gè)中文字算2個(gè)字符)"
},
email:{
required: "請(qǐng)輸入一個(gè)Email地址",
email: "請(qǐng)輸入一個(gè)有效的Email地址"
},
phone:{
required: "請(qǐng)輸入您的聯(lián)系電話",
isPhone: "請(qǐng)輸入一個(gè)有效的聯(lián)系電話"
},
address:{
required: "請(qǐng)輸入您的聯(lián)系地址",
stringCheck: "請(qǐng)正確輸入您的聯(lián)系地址",
byteRangeLength: "請(qǐng)?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());
},
});
});
測(cè)試頁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);
}
}
JavaScript技術(shù)：jQuery.Validate 使用筆記(jQuery Validation范例 )，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
