新手写的插件,大家帮忙指点下吧
时间:2009-06-24
来源:互联网
本人前天晚上开始学jquery,学习的方式就是不停的查Api和到本版咨询。
为了演练选择器及其他相关的用法,写了个轻量级表单验证插件:
请jquery高手帮忙指点或优化下。
使用如下:
<script language="javascript">
$(function(){
$(":text[name='username']").check("chn","必须填写中文!");
$(":text[name='english']").check("eng","必须填写e文!",false);
$(":text[name='ok.number']").check("eq,eng","值为英文且等于english文本框值",true,$(":text[name='english']").val());
$(":input[name='selectname']").check("rq","没有选择");
$(":radio[name='radioname']").check("rq","没有选择");
$(":checkbox[name='box']").check("rq","没有选择");
$("form[name='form1']").check();
})
</script>
参数说明:
$(":text[name='username']") 表单对象名
chek() 函数
第一个参数为验证类型(多重验证用,号隔开),
第二个参数为提醒信息
第三个参数为是否必填,可选,无值即为必填
第四个参数为参考值,可选,用来进行对比
默认验证事件为blur和submit
经多次测试,暂没发现bug
未加入ajax验证
插件代码如下:
//表单验证 2009.6
;(function($){
$.fn.extend({
"items":[],
"getVal":function(){
var fval = "";
if ($(this).length>1){
$.each($(this),function(){
if ($(this).is(":checked")) {
fval = $(this).val();
return false;
}
});
}else{
fval = $(this).val();
}
return $.trim(fval);
},
"test":function(typeArg,matchVal){
var fval = $(this).getVal();
var rule = {
"rq" : /.+/,
"eng" : /^[A-Za-z]+$/,
"chn" :/^[\u0391-\uFFE5]+$/,
"mail" : /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
"url" : /^http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
"currency" : /^\d+(\.\d+)?$/,
"number" : /^\d+$/,
"int" : /^[0-9]{1,30}$/,
"double" : /^[-\+]?\d+(\.\d+)?$/,
"username" : /[0-9a-zA-Z]{3,20}/,
"safe" : /^(\w){6,20}$/,
"QQ" : /[1-9][0-9]{4,}/,
"date" : /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/,
"year" : /^(19|20)[0-9]{2}$/,
"month" : /^(0?[1-9]|1[0-2])$/,
"day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/,
"hour" : /^((0?[1-9])|((1|2)[0-3]))$/,
"minute" : /^((0?[1-9])|((1|5)[0-9]))$/,
"mobile" : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
"phone" : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
"zipcode" : /^[1-9]\d{5}$/,
"bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)\d{4}((19\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(19\d{2}(0[13578]|1[02])31)|(19\d{2}02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X|x)?$/,
"IP" : /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
"file": /^[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
"image" : /.+\.(jpg|gif|png|bmp)$/i,
"word" : /.+\.(doc|rtf)$/i,
"eq": function(arg1,arg2){ return (arg1==arg2) ? true:false;},
"gt": function(arg1,arg2){ return (arg1>arg2) ? true:false;},
"ge": function(arg1,arg2){ return (arg1>=arg2) ? true:false;},
"lt": function(arg1,arg2){ return (arg1<arg2) ? true:false;},
"lq": function(arg1,arg2){ return (arg1<=arg2) ? true:false;},
"title": function(arg1) {
var sl = arg1.match(/[^ -~]/g) == null ? arg1.length : arg1.length + arg1.match(/[^ -~]/g).length;
return sl<=0 || sl>255 ? false:true;
}
}
var checkType = function(type){
var objType = eval( "rule." + type);
if ($.isFunction(objType)) {
if(arguments.length = 2 && matchVal!="" && matchVal!=undefined){
return eval( "rule."+type+"('"+fval+"','"+matchVal+"')");
}else{
return eval( "rule."+type+"('"+fval+"')");
}
}else{
return objType.test(fval);
}
}
var result = true;
$.each(typeArg.split(","),function(){
if (checkType(this)==false){
result = false;
return false;
}
});
return result;
},
"showTip":function(type,msg,matchVal){
var tipName = "info_" + $(this).attr("name").replace(/[^\da-zA-Z\-]/g,"");
$(this).parent().find("#"+tipName).remove();
if($(this).test(type,matchVal)) {
$(this).css("background","#DCFFDD");
$(this).eq($(this).length-1).after("<span id='"+tipName+"'style='color:green'><img src='check_right2.gif'/>检测通过!</span>");
}else{
$(this).css("background","#FFDFDD");
$(this).eq($(this).length-1).after("<span id='"+tipName+"'style='color:red'><img src='check_error2.gif'/>"+msg+"</span>");
}
},
"removeTip":function(){
var tipName = "info_" + $(this).attr("name").replace(/[^\da-zA-Z\-]/g,"");
$(this).parent().find("#"+tipName).remove();
$(this).css("background","");
},
"check":function(type,msg,isrq,matchVal){
if( $(this).is(":input") && type!= undefined && msg!= undefined ){
var rq = true, mv = "",objs = $(this);
if(isrq != undefined && isrq == false ) rq= false;
if(matchVal != undefined && matchVal != "") mv = matchVal;
$(this).blur(function(){
if ( rq == true || (rq == false && objs.getVal() != "")) {
objs.showTip(type,msg,mv);
}else{
objs.removeTip();
}
});
$(this).items.push([$(this),type,msg,rq,mv]);
} else if ($(this).is("form")){
$(this).submit(function(){
return $(this).valid();
});
}
},
"valid":function(){
var result = true;
$.each($(this).items,function(){
if( ! $(this)[0].test($(this)[1],$(this)[4]) && $(this)[3]){
result = false;
return false;
}
});
if (result) {
return true;
}else{
var tipinfo = "";
$.each($(this).items,function(){
if($(this)[3] || (! $(this)[3] && $(this)[0].getVal() != "")) {
$(this)[0].showTip($(this)[1],$(this)[2],$(this)[4]);
if(! $(this)[0].test($(this)[1],$(this)[4])) tipinfo += "·"+$(this)[2]+"\n";
}
});
alert("表单有误!请正确填写相关内容。\n\n"+ tipinfo);
return false;
}
}
});
})(jQuery);
为了演练选择器及其他相关的用法,写了个轻量级表单验证插件:
请jquery高手帮忙指点或优化下。
使用如下:
<script language="javascript">
$(function(){
$(":text[name='username']").check("chn","必须填写中文!");
$(":text[name='english']").check("eng","必须填写e文!",false);
$(":text[name='ok.number']").check("eq,eng","值为英文且等于english文本框值",true,$(":text[name='english']").val());
$(":input[name='selectname']").check("rq","没有选择");
$(":radio[name='radioname']").check("rq","没有选择");
$(":checkbox[name='box']").check("rq","没有选择");
$("form[name='form1']").check();
})
</script>
参数说明:
$(":text[name='username']") 表单对象名
chek() 函数
第一个参数为验证类型(多重验证用,号隔开),
第二个参数为提醒信息
第三个参数为是否必填,可选,无值即为必填
第四个参数为参考值,可选,用来进行对比
默认验证事件为blur和submit
经多次测试,暂没发现bug
未加入ajax验证
插件代码如下:
//表单验证 2009.6
;(function($){
$.fn.extend({
"items":[],
"getVal":function(){
var fval = "";
if ($(this).length>1){
$.each($(this),function(){
if ($(this).is(":checked")) {
fval = $(this).val();
return false;
}
});
}else{
fval = $(this).val();
}
return $.trim(fval);
},
"test":function(typeArg,matchVal){
var fval = $(this).getVal();
var rule = {
"rq" : /.+/,
"eng" : /^[A-Za-z]+$/,
"chn" :/^[\u0391-\uFFE5]+$/,
"mail" : /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
"url" : /^http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
"currency" : /^\d+(\.\d+)?$/,
"number" : /^\d+$/,
"int" : /^[0-9]{1,30}$/,
"double" : /^[-\+]?\d+(\.\d+)?$/,
"username" : /[0-9a-zA-Z]{3,20}/,
"safe" : /^(\w){6,20}$/,
"QQ" : /[1-9][0-9]{4,}/,
"date" : /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/,
"year" : /^(19|20)[0-9]{2}$/,
"month" : /^(0?[1-9]|1[0-2])$/,
"day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/,
"hour" : /^((0?[1-9])|((1|2)[0-3]))$/,
"minute" : /^((0?[1-9])|((1|5)[0-9]))$/,
"mobile" : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
"phone" : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
"zipcode" : /^[1-9]\d{5}$/,
"bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)\d{4}((19\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(19\d{2}(0[13578]|1[02])31)|(19\d{2}02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X|x)?$/,
"IP" : /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
"file": /^[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
"image" : /.+\.(jpg|gif|png|bmp)$/i,
"word" : /.+\.(doc|rtf)$/i,
"eq": function(arg1,arg2){ return (arg1==arg2) ? true:false;},
"gt": function(arg1,arg2){ return (arg1>arg2) ? true:false;},
"ge": function(arg1,arg2){ return (arg1>=arg2) ? true:false;},
"lt": function(arg1,arg2){ return (arg1<arg2) ? true:false;},
"lq": function(arg1,arg2){ return (arg1<=arg2) ? true:false;},
"title": function(arg1) {
var sl = arg1.match(/[^ -~]/g) == null ? arg1.length : arg1.length + arg1.match(/[^ -~]/g).length;
return sl<=0 || sl>255 ? false:true;
}
}
var checkType = function(type){
var objType = eval( "rule." + type);
if ($.isFunction(objType)) {
if(arguments.length = 2 && matchVal!="" && matchVal!=undefined){
return eval( "rule."+type+"('"+fval+"','"+matchVal+"')");
}else{
return eval( "rule."+type+"('"+fval+"')");
}
}else{
return objType.test(fval);
}
}
var result = true;
$.each(typeArg.split(","),function(){
if (checkType(this)==false){
result = false;
return false;
}
});
return result;
},
"showTip":function(type,msg,matchVal){
var tipName = "info_" + $(this).attr("name").replace(/[^\da-zA-Z\-]/g,"");
$(this).parent().find("#"+tipName).remove();
if($(this).test(type,matchVal)) {
$(this).css("background","#DCFFDD");
$(this).eq($(this).length-1).after("<span id='"+tipName+"'style='color:green'><img src='check_right2.gif'/>检测通过!</span>");
}else{
$(this).css("background","#FFDFDD");
$(this).eq($(this).length-1).after("<span id='"+tipName+"'style='color:red'><img src='check_error2.gif'/>"+msg+"</span>");
}
},
"removeTip":function(){
var tipName = "info_" + $(this).attr("name").replace(/[^\da-zA-Z\-]/g,"");
$(this).parent().find("#"+tipName).remove();
$(this).css("background","");
},
"check":function(type,msg,isrq,matchVal){
if( $(this).is(":input") && type!= undefined && msg!= undefined ){
var rq = true, mv = "",objs = $(this);
if(isrq != undefined && isrq == false ) rq= false;
if(matchVal != undefined && matchVal != "") mv = matchVal;
$(this).blur(function(){
if ( rq == true || (rq == false && objs.getVal() != "")) {
objs.showTip(type,msg,mv);
}else{
objs.removeTip();
}
});
$(this).items.push([$(this),type,msg,rq,mv]);
} else if ($(this).is("form")){
$(this).submit(function(){
return $(this).valid();
});
}
},
"valid":function(){
var result = true;
$.each($(this).items,function(){
if( ! $(this)[0].test($(this)[1],$(this)[4]) && $(this)[3]){
result = false;
return false;
}
});
if (result) {
return true;
}else{
var tipinfo = "";
$.each($(this).items,function(){
if($(this)[3] || (! $(this)[3] && $(this)[0].getVal() != "")) {
$(this)[0].showTip($(this)[1],$(this)[2],$(this)[4]);
if(! $(this)[0].test($(this)[1],$(this)[4])) tipinfo += "·"+$(this)[2]+"\n";
}
});
alert("表单有误!请正确填写相关内容。\n\n"+ tipinfo);
return false;
}
}
});
})(jQuery);
作者: janchie 发布时间: 2009-06-24
我先收藏。最近我也刚写了个小验证函数。只是里面的结构太乱了。
作者: czcz 发布时间: 2009-07-21
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28