JQuery擴(kuò)展插件Validate 5添加自定義驗(yàn)證方法
更新時(shí)間:2011年09月05日 21:14:55 作者:
從前面的示例中不難看出validate中自帶的驗(yàn)證方法足以滿足一般的要求,對于特別的要求可以使用addMethod(name,method,message)添加自定義的驗(yàn)證規(guī)則,下面的示例中添加了一個(gè)用于正則表達(dá)式驗(yàn)證的擴(kuò)展驗(yàn)證的方法
示例如下:
<script type="text/javascript">
jQuery.validator.addMethod("regex", //addMethod第1個(gè)參數(shù):方法名稱
function(value, element, params) { //addMethod第2個(gè)參數(shù):驗(yàn)證方法,參數(shù)(被驗(yàn)證元素的值,被驗(yàn)證元素,參數(shù))
var exp = new RegExp(params); //實(shí)例化正則對象,參數(shù)為傳入的正則表達(dá)式
return exp.test(value); //測試是否匹配
},
"格式錯誤"); //addMethod第3個(gè)參數(shù):默認(rèn)錯誤信息
$(function() {
$("#signupForm").validate(
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對象類型
required: true, //必填,這里可以是一個(gè)匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10], //長度5-10之間
regex: "^\\w+$" //使用自定義的驗(yàn)證規(guī)則,在上例中新增的部分
},
txtEmail: "email" //電子郵箱必須合法
},
messages: {
txtPassword1: "您必須填寫",
txtPassword2: {
required: "您必須填寫",
equalTo: "密碼不一致",
rangelength: "長度必須介于{0} 和 {1} 之間的字符串",
regex: "密碼只能是數(shù)字、字母與下劃線"
}
},
debug: false, //如果修改為true則表單不會提交
submitHandler: function() {
alert("開始提交了");
}
});
});
</script>
運(yùn)行結(jié)果:

注意,如果參數(shù)有多個(gè)可以使用數(shù)組,如regex:[1,3,5],方法中可以使用下標(biāo)訪問:params[0]
網(wǎng)友提供的一些擴(kuò)展驗(yàn)證方法:
// 手機(jī)號碼驗(yàn)證
jQuery.validator.addMethod("mobile", 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("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "電話號碼格式錯誤");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯誤");
// QQ號碼驗(yàn)證
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq號碼格式錯誤");
// IP地址驗(yàn)證
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯誤");
// 字母和數(shù)字的驗(yàn)證
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能輸入數(shù)字和字母(字符A-Z, a-z, 0-9)");
// 中文的驗(yàn)證
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");
// 下拉框驗(yàn)證
$.validator.addMethod("selectNone", function(value, element) {
return value == "請選擇";
}, "必須選擇一項(xiàng)");
// 字節(jié)長度驗(yàn)證
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]);
}, $.validator.format("請確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));
Validate_20110905.rar
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery.validator.addMethod("regex", //addMethod第1個(gè)參數(shù):方法名稱
function(value, element, params) { //addMethod第2個(gè)參數(shù):驗(yàn)證方法,參數(shù)(被驗(yàn)證元素的值,被驗(yàn)證元素,參數(shù))
var exp = new RegExp(params); //實(shí)例化正則對象,參數(shù)為傳入的正則表達(dá)式
return exp.test(value); //測試是否匹配
},
"格式錯誤"); //addMethod第3個(gè)參數(shù):默認(rèn)錯誤信息
$(function() {
$("#signupForm").validate(
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對象類型
required: true, //必填,這里可以是一個(gè)匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10], //長度5-10之間
regex: "^\\w+$" //使用自定義的驗(yàn)證規(guī)則,在上例中新增的部分
},
txtEmail: "email" //電子郵箱必須合法
},
messages: {
txtPassword1: "您必須填寫",
txtPassword2: {
required: "您必須填寫",
equalTo: "密碼不一致",
rangelength: "長度必須介于{0} 和 {1} 之間的字符串",
regex: "密碼只能是數(shù)字、字母與下劃線"
}
},
debug: false, //如果修改為true則表單不會提交
submitHandler: function() {
alert("開始提交了");
}
});
});
</script>
運(yùn)行結(jié)果:
注意,如果參數(shù)有多個(gè)可以使用數(shù)組,如regex:[1,3,5],方法中可以使用下標(biāo)訪問:params[0]
網(wǎng)友提供的一些擴(kuò)展驗(yàn)證方法:
復(fù)制代碼 代碼如下:
// 手機(jī)號碼驗(yàn)證
jQuery.validator.addMethod("mobile", 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("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "電話號碼格式錯誤");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯誤");
// QQ號碼驗(yàn)證
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq號碼格式錯誤");
// IP地址驗(yàn)證
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯誤");
// 字母和數(shù)字的驗(yàn)證
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能輸入數(shù)字和字母(字符A-Z, a-z, 0-9)");
// 中文的驗(yàn)證
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");
// 下拉框驗(yàn)證
$.validator.addMethod("selectNone", function(value, element) {
return value == "請選擇";
}, "必須選擇一項(xiàng)");
// 字節(jié)長度驗(yàn)證
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]);
}, $.validator.format("請確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));
Validate_20110905.rar
您可能感興趣的文章:
- jQuery驗(yàn)證插件 Validate詳解
- JQuery擴(kuò)展插件Validate—4設(shè)置錯誤提示的樣式
- JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
- jValidate 基于jQuery的表單驗(yàn)證插件
- jQuery驗(yàn)證插件validate使用方法詳解
- jQuery插件Validate實(shí)現(xiàn)自定義校驗(yàn)結(jié)果樣式
- jquery插件validate驗(yàn)證的小例子
- jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
- Jquery插件 easyUI屬性匯總
- Jquery插件之多圖片異步上傳
- jQuery Dialog 彈出層對話框插件
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jQuery validate插件功能與用法詳解
相關(guān)文章
基于jQuery實(shí)現(xiàn)文本框只能輸入數(shù)字(小數(shù)、整數(shù))
在實(shí)際應(yīng)用中,文本框中有時(shí)候只能夠允許輸入整數(shù),但是有時(shí)候可能更為"博愛"一點(diǎn),可以允許輸入浮點(diǎn)數(shù),下面就通過實(shí)例代碼介紹一下如何利用jquery實(shí)現(xiàn)此功能2016-01-01
jquery checkbox無法用attr()二次勾選問題的解決方法
下面小編就為大家?guī)硪黄猨query checkbox無法用attr()二次勾選問題的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop,感興趣的小伙伴們可以參考一下2015-12-12
jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
驗(yàn)證碼倒計(jì)時(shí)功能,在前端開發(fā)中經(jīng)常會遇到,下面小編給大家?guī)砹薺Query 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能,感興趣的朋友跟隨小編一起看看吧2018-09-09
jquery實(shí)現(xiàn)簡單實(shí)用的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單實(shí)用的彈出層效果代碼,涉及jquery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jQuery源碼分析-03構(gòu)造jQuery對象-工具函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對象-工具函數(shù),需要的朋友可以參考下。2011-11-11

