jquery.validate 自定義驗證方法

jquery.validate 自定義驗證方法

$(document).ready( function() {

/**
* 身份證號碼驗證
*
*/
function isIdCardNo(num) {

var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2");
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen != 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}

if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{ //length is 15
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {

return false;
}
}
return true;

}
/**
* 判斷是否爲「YYYYMM」式的時期
*
*/
function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500) return false
if (month < 1 || month > 12) return false
return true
}
/**
* 判斷是否爲「YYYYMMDD」式的時期
*
*/
function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500) return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) return false
if (day < 1 || day > iaMonthDays[month - 1]) return false
return true
}
// 身份證號碼驗證
jQuery.validator.addMethod("idcardno", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "請正確輸入身份證號碼");

//字母數字
jQuery.validator.addMethod("alnum", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和數字");

// 郵政編碼驗證
jQuery.validator.addMethod("zipcode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫郵政編碼");

// 漢字
jQuery.validator.addMethod("chcharacter", function(value, element) {
var tel = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, "請輸入漢字");

// 字符最小長度驗證（一箇中文字符長度爲2）
jQuery.validator.addMethod("stringMinLength", 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("stringMaxLength", 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}!"));

// 字符驗證
jQuery.validator.addMethod("string", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "不容許包含特殊符號!");

// 手機號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
}, "手機號碼格式錯誤!");

// 電話號碼驗證
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "電話號碼格式錯誤!");

// 郵政編碼驗證
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯誤!");

// 必須以特定字符串開頭驗證
jQuery.validator.addMethod("begin", function(value, element, param) {
var begin = new RegExp("^" + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format("必須以 {0} 開頭!"));

// 驗證兩次輸入值是否不相同
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return value != $(param).val();
}, $.validator.format("兩次輸入不能相同!"));

// 驗證值不容許與特定值等於
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return value != param;
}, $.validator.format("輸入值不容許爲{0}!"));

// 驗證值必須大於特定值(不能等於)
jQuery.validator.addMethod("gt", function(value, element, param) {
return value > param;
}, $.validator.format("輸入值必須大於{0}!"));

// 驗證值小數位數不能超過兩位
jQuery.validator.addMethod("decimal", function(value, element) {
var decimal = /^-?\d+(\.\d{1,2})?$/;
return this.optional(element) || (decimal.test(value));

jQuery.validate 用法
2010年04月12日 星期一 14:33

名稱 返回類型 描述

validate(options) 返回:Validator 驗證所選的FORM

valid() 返回:Boolean 檢查是否驗證經過

rules() 返回:Options 返回元素的驗證規則

rules(add,rules) 返回:Options 增長驗證規則

rules(remove,rules)

jquery.validate是一個基於jquery的很是優秀的驗證框架，咱們能夠經過它迅速驗證一些常見的輸入,而且能夠本身擴充本身的驗證方法，並且對國際化也有很是好的支持。

jquery.validate 官方網址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

使用用法：
一、首先下載jquery.js和jquery.validate.js並引入js文件(注意：jquery必須在jquery.validate.js 以前被引入，不然會報錯)

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

二、編寫須要驗證的表單代碼及編寫驗證代碼(編寫驗證代碼有兩種方式，首先使用普通方式)

var validator = $("formId").validate({// #formId爲須要進行驗證的表單ID
errorElement :"div",// 使用"div"標籤標記錯誤， 默認:"label"
wrapper:"li",// 使用"li"標籤再把上邊的errorELement包起來
errorClass :"validate-error",// 錯誤提示的css類名"error"
onsubmit:true,// 是否在提交是驗證,默認:true
onfocusout:true,// 是否在獲取焦點時驗證,默認:true
onkeyup :true,// 是否在敲擊鍵盤時驗證,默認:true
onclick:false,// 是否在鼠標點擊時驗證（通常驗證checkbox,radiobox）
focusCleanup:false,// 當未經過驗證的元素得到焦點時,並移除錯誤提示
rules: {
loginName: {// 須要進行驗證的輸入框name
required: true// 驗證條件：必填
},
loginPassword: {// 須要進行驗證的輸入框name
required: true,// 驗證條件：必填
minlength: 5// 驗證條件：最小長度爲5
},
email: {// 須要進行驗證的輸入框name
required: true,// 驗證條件：必填
email: true// 驗證條件：格式爲email
}
},
messages: {
loginName: {
required: "用戶名不容許爲空!"// 驗證未經過的消息
},
loginPassword: {
required: "密碼不容許爲空!",
minlength: jQuery.format("密碼至少輸入 {0} 字符!")
},
email: {
required: "email不容許爲空",
email: "郵件地址格式錯誤!"
}
}

二、使用meta String方式進行驗證，即驗證內容與寫入class中(注意meta String方式須要引入jquery.metadata.js文件)

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

<form id="validate" action="admin/transfer!save.action" method="post">
<input type="text" class="required" name="entity.name" />
<input type="text" class="email" name="entity.email" />
<input type="submit" class="button" value="提 交" />
</form>
<script type="text/javascript">
$(document).ready(
function() {
$("#formId").validate({// #formId爲須要進行驗證的表單ID
meta :"validate"// 採用meta String方式進行驗證（驗證內容與寫入class中）
errorElement :"div",// 使用"div"標籤標記錯誤， 默認:"label"
wrapper:"li",// 使用"li"標籤再把上邊的errorELement包起來
errorClass :"validate-error",// 錯誤提示的css類名"error"
onsubmit:true,// 是否在提交是驗證,默認:true
onfocusout:true,// 是否在獲取焦點時驗證,默認:true
onkeyup :true,// 是否在敲擊鍵盤時驗證,默認:true
onclick:false,// 是否在鼠標點擊時驗證（通常驗證checkbox,radiobox）
focusCleanup:false,// 當未經過驗證的元素得到焦點時,並移除錯誤提示
});
})
</script>

注意：在Struts2應用中常常用遇到name="entity.name"形式的input表單(即name中包含逗號或其它特殊符號時),咱們能夠將上述名稱以引號("")括起便可，如：

rules: {
"entity.loginName": {// 須要進行驗證的輸入框name
required: true// 驗證條件：必填
}
},
messages: {
"entity.loginName": {
required: "用戶名不容許爲空!"// 驗證未經過的消息
}
}

可給我email:happyczx@126.com 歡迎一塊兒探討有關java技術的問題
以上部分代碼來源於payj開源支付系統，這個java開源項目裏面有不少優秀的Struts2 spring hibernate jquery 等框架的應用源碼，值得一看。在這裏先推薦一下，呵呵。。。

。

附：

內置驗證方式：
required() 返回:Boolean 必填驗證元素
required(dependency-expression) 返回:Boolean 必填元素依賴於表達式的結果
required(dependency-callback) 返回:Boolean 必填元素依賴於回調函數的結果
remote(url) 返回:Boolean 請求遠程校驗。url一般是一個遠程調用方法
minlength(length) 返回:Boolean 設置最小長度
maxlength(length) 返回:Boolean 設置最大長度
rangelength(range) 返回:Boolean 設置一個長度範圍[min,max]
min(value) 返回:Boolean 設置最大值
max(value) 返回:Boolean 設置最小值
email() 返回:Boolean 驗證電子郵箱格式
range(range) 返回:Boolean 設置值的範圍
url() 返回:Boolean 驗證URL格式
date() 返回:Boolean 驗證日期格式(相似30/30/2008的格式,不驗證日期準確性只驗證格式)
dateISO() 返回:Boolean 驗證ISO類型的日期格式
dateDE() 返回:Boolean 驗證德式的日期格式（29.04.1994 or 1.1.2006）
number() 返回:Boolean 驗證十進制數字（包括小數的）
digits() 返回:Boolean 驗證整數
creditcard() 返回:Boolean 驗證信用卡號
accept(extension) 返回:Boolean 驗證相同後綴名的字符串
equalTo(other) 返回:Boolean 驗證兩個輸入框的內容是否相同
phoneUS() 返回:Boolean 驗證美式的電話號碼

validate ()的可選項：
debug:進行調試模式（表單不提交）: $(".selector").validate
({
debug:true
})
把調試設置爲默認: $.validator.setDefaults({
debug:true
})
submitHandler:
經過驗證後運行的函數,裏面要加上表單提交的函數,不然表單不會提交 $(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();
}
})
ignore:
對某些元素不進行驗證 $("#myform").validate({
ignore:".ignore"
})
rules:
自定義規則,key:value的形式,key是要驗證的元素,value能夠是字符串或對象 $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
}
})
messages:
自定義的提示信息key:value的形式key是要驗證的元素,值是字符串或函數 $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"Name不能爲空",
email:{
required:"E-mail不能爲空",
email:"E-mail地址不正確"
}
}
})
groups:
對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯信息放在哪裏 $("#myform").validate({
groups:{
username:"fname lname"
},
errorPlacement:function(error,element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname");
else
error.insertAfter(element);
},
debug:true
})
Onubmit Boolean 默認:true
是否提交時驗證 $(".selector").validate({
onsubmit:false
})
onfocusout Boolean 默認:true
是否在獲取焦點時驗證 $(".selector").validate({
onfocusout:false
})
onkeyup Boolean 默認:true
是否在敲擊鍵盤時驗證 $(".selector").validate({
onkeyup:false
})
onclick Boolean 默認:true
是否在鼠標點擊時驗證（通常驗證checkbox,radiobox） $(".selector").validate({
onclick:false
})
focusInvalid Boolean 默認:true
提交表單後,未經過驗證的表單(第一個或提交以前得到焦點的未經過驗證的表單)會得到焦點 $(".selector").validate({
focusInvalid:false
})
focusCleanup Boolean 默認:false
當未經過驗證的元素得到焦點時,並移除錯誤提示（避免和 focusInvalid.一塊兒使用） $(".selector").validate({
focusCleanup:true
})
errorClass String 默認:"error"
指定錯誤提示的css類名,能夠自定義錯誤提示的樣式 $(".selector").validate({
errorClass:"invalid"
})
errorElement String 默認:"label"
使用什麼標籤標記錯誤 $(".selector").validate
errorElement:"em"
})
wrapper String
使用什麼標籤再把上邊的errorELement包起來 $(".selector").validate({
wrapper:"li"
})
errorLabelContainer Selector
把錯誤信息統一放在一個容器裏面 $("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() { alert("Submitted!") }
})

showErrors:
跟一個函數,能夠顯示總共有多少個未經過驗證的元素 $(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors();
}
})
errorPlacement:
跟一個函數,能夠自定義錯誤放到哪裏 $("#myform").validate({
rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));
},
debug:true

})
success:
要驗證的元素經過驗證後的動做,若是跟一個字符串,會當作一個css類,也可跟一個函數 $("#myform").validate({
success:"valid",
submitHandler:function() { alert("Submitted!") }
})
highlight:
能夠給未經過驗證的元素加效果,閃爍等

addMethod(name,method,message)方法：
參數name是添加的方法的名字
參數method是一個函數,接收三個參數(value,element,param) value是元素的值,element是元素自己 param是參數,咱們能夠用addMethod來添加除built-in Validation methods之

外的驗證方法 好比有一個字段,只能輸一個字母,範圍是a-f,寫法以下:

$.validator.addMethod("af",function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},"必須是一個字母,且a-f");
用的時候,好比有個表單字段的id="username",則在rules中寫
username:{
af:["a","f"]
}

addMethod的第一個參數,就是添加的驗證方法的名子,這時是af
addMethod的第三個參數,就是自定義的錯誤提示,這裏的提示爲:"必須是一個字母,且a-f"
addMethod的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法
若是隻有一個參數,直接寫,若是af:"a",那麼a就是這個惟一的參數,若是多個參數,用在[]裏,用逗號分開

}, $.validator.format("小數位數不能超過兩位!"));

});