封装好的一个万能检测表单的方法
检测表单中的不能为空(.notnull)的验证
作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断
用法:在form标签下找到当前表单的容器给予class="form",当前表单的提交按钮给予class="check"
需要验证为空的元素给予class="notnull"nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="need"
判断的类型给予class="num"(只能是数字)验证的提示logicmsg="XX只能是数字"
给予class="errorMessage"显示错误信息块
给予class="warn"显示错误信息
未使用js面向对象编程
逻辑判断,不传入need标识,直接给出正则表达式属性(自定义)regex="/^\d$/" 做出判断
在外部实现
Global.submitCallbackbutton回调函数
Global.confirmCallbackconfirm回调函数;
需要改进的地方:
暂无
///<referencepath="vendor/jquery-1.4.1-vsdoc.js"/> */ //$(document).ready( // function(){ // $("form").find(".notnull").bind({ // focus:function(){ // if($(this).attr("value")==this.defaultValue){ // $(this).attr("value",""); // } // }, // blur:function(){ // if($(this).attr("value")==""){ // $(this).attr("value",this.defaultValue); // } // } // }); // } //); ///*封装一个万能检测表单的方法*/ ///event.srcElement:引发事件的目标对象,常用于onclick事件。 ///event.fromElement:引发事件的对象源,常用于onmouseout和onmouseover事件。 ///event.toElement:引发事件后,鼠标移动到的目标源,常用于onmouseout和onmouseover事件。 functionGlobal(){ var_self=this; } Global.submitCallback=null; Global.confirmCallback=null; $(document).ready(function(){ //formbody $("body").find(".form").each(function(){ this.onclick=function(e){ varbutton=null; try{ button=e.srcElement==null?document.activeElement:e.srcElement; }catch(e){ console.log(e.message) button=document.activeElement; } if($(button).is(".check")){ //alert("提交") varsub=(checkform(this)&&CheckInputRex(this)&&checkselect(this)&&checkChecked(this)); if(sub){ //Callourcallback,butusingourowninstanceasthecontext Global.submitCallback.call(this,[e]); } returnsub; }elseif($(button).is(".confirm")){ //alert("删除") varsub=confirm($(button).attr("title")); if(sub){ Global.confirmCallback.call(this,[e]); } returnsub; }else{ // //alert("其它") returntrue; } } }); /*检测表单中不能为空的元素*/ functioncheckform(form){ varb=true; $(form).find(".notnull").each(function(){ if($.trim($(this).val()).length<=0){//||$(this).val()==this.defaultValue // if(this.value!=null){ // $(this).attr("value",""); // } //alert($(this).attr("msg")) $(this).parents(".form").find(".warn").text($(this).attr("nullmsg")); $(this).parents(".form").find(".errorMessage").show(); $(this).select(); $(this).focus(); returnb=false; } }); if(b==true){ $(form).find(".warn").text(""); $(form).find(".errorMessage").hide(); } returnb; } /*检测表单中必选的下拉列表*/ functioncheckselect(form){ varb=true; $(form).find(".select").each(function(i){ varck=$(this).find('option:selected').text(); if(ck.indexOf("选择")>-1){ $(this).parents(".form").find(".warn").text($(this).attr("nullmsg")); $(this).parents(".form").find(".errorMessage").show(); $(this).select(); $(this).focus(); returnb=false; } }); returnb; } /*检测表单中必选的复选框*/ functioncheckChecked(form){ varb=true; $(form).find(".checkbox").each(function(i){ varck=$(this)[0].checked; if(!ck){ $(this).parents(".form").find(".warn").text($(this).attr("nullmsg")); $(this).parents(".form").find(".errorMessage").show(); $(this).select(); $(this).focus(); returnb=false; } }); returnb; } //检查是否匹配该正则表达式 functionGetFlase(value,reg,ele){ if(reg.test(value)){ returntrue; } $(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg")); $(ele).parents(".form").find(".errorMessage").show(); $(ele).focus(); $(ele).select(); returnfalse;//不能提交 } functionCheckInputRex(form){ varb=true; $(form).find("input[type='text']").each(function(){ if(typeof($(this).attr("regex"))=='string'){ if($.trim($(this).val()).length>0&&$(this).val()!=this.defaultValue){ //当前表单的值 varvalue=$(this).attr("value")||$(this).val(); varregx=eval($(this).attr("regex")); returnb=GetFlase(value,regx,this); } } }); returnb; } ///检查用户输入的相应的字符是否合法 ///此方法已废弃 functionCheckInput(form){ varb=true; $(form).find(".need").each(function(){ if($.trim($(this).val()).length>0&&$(this).val()!=this.defaultValue){ //当前表单的值 varvalue=$(this).attr("value"); //id的值或者name的属性的值如:[name="contact"] varname=$(this).attr("class"); //检查需要输入的内容是否合法如:联系方式 varlen=name.split(""); for(vari=0;i<len.length;i++){ switch($.trim(len[i])){ ///联系方式 case"mobile": varreg=/^1\d{10}$/; returnb=GetFlase(value,reg,this); break; ///邮箱 case"email": varreg=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; returnb=GetFlase(value,reg,this); break; ///两次密码是否一致 case"password": break; case"password2": if($("#password").attr("value")!=$("#password2").attr("value")){ $(this).select();//获取焦点 $(this).parents(".form").find(".warn").text($(this).attr("logicmsg")); $(this).parents(".form").find(".errorMessage").show(); returnb=false;//不能提交 } break; case"worktel": case"hometel"://家庭电话 varreg=/^\d{8}$/; returnb=GetFlase(value,reg,this); break; case"post"://邮编 varreg=/^\d{6}$/; returnb=GetFlase(value,reg,this); break; case"bonus": case"allowance": case"FixedSalary": varreg=/^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0|[1-9]\d)$/; returnb=GetFlase(value,reg,this); break; case"identity": varreg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; returnb=GetFlase(value,reg,this); break; case"height": varreg=/^[1-2][0-9][0-9]$/; returnb=GetFlase(value,reg,this); break; case"qq": varreg=/^[1-9][0-9]{4,}$/; returnb=GetFlase(value,reg,this); break; case"begintime": case"endtime": varreg=/^\d{4}$/; if(reg.test(value)&&(parseInt($(".endtime").val())>parseInt($(".begintime").val()))){ returnb; } $.ligerDialog.alert($(this).attr("msg")) $(this).select();//获取焦点 returnb=false;//不能提交 break; case"num": varreg=/^\d+$/; returnb=GetFlase(value,reg,this); break; ///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有: ///14/15+7位数,G+8位数; ///因公普通的是:P.+7位数; ///公务的是:S.+7位数或者 //S+8位数,以D开头的是外交护照 case"postport"://护照号码 varreg=/^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|1[4,5]\d{7})$/; returnb=GetFlase(value,reg,this); break; case"bankaccount": varreg=/^[0-9]{19}$/; returnb=GetFlase(value,reg,this); break; }//switch }//for } }); returnb; } ///此方法已经废弃 }); ///单击改变背景颜色 $(document).ready(function(){ varinputs=$("#top>.c>input"); $(inputs).each(function(){ this.onclick=function(){ document.getElementById("main").style.backgroundColor=this.name; //$("#main").backgroundColor=this.name; } }); });
以上代码就是封装过之后的万能检测表单的方法了,希望小伙伴们喜欢