jQuery扩展+xml实现表单验证功能的方法
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考,具体如下:
此处表单验证jQuery引用jquery.1.8.2.js,md5.js
扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法)
String.prototype.trim=function(){returnthis.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim方法问题 (function($){ $.elementVal=newArray(); /** ******************************************************************************************************************************************** *========自定义提示语============================================================================================================== *========regex、如果有正则表达式的话=============================================================================================== *========successMsg、验证成功时==================================================================================================== *========errorMsg、验证失败时====================================================================================================== *promptMsg、提示语=================================================================================================================*********************** **/ $.vfData={ errorhtml:'<imgsrc="images/cuo_biao.png">', successhtml:'<imgsrc="images/dui_biao.png"/>', pormpthtml:'<imgsrc="images/tishi_biao.png">', _null:{ //successMsg:"", errorMsg:"不能为空!", promptMsg:"不能为中文" }, _firstpwd:{ regex:/^[a-z0-9_-]{6,18}$/, //successMsg:"", errorMsg:"密码格式不正确!", promptMsg:"6-16位字符(字母或数字),区分大小写" }, _code:{ regex:/^[a-z0-9_-]{6,18}$/, //successMsg:"", errorMsg:"机构代码不正确!", promptMsg:"机构代码为自填项!" }, _secondpwd:{ //successMsg:"", errorMsg:"两次密码不一致!,请确保初次密码格式正确", promptMsg:"请再次输入密码" }, _email:{ regex:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, //successMsg:"", errorMsg:"邮箱地址格式不正确!", promptMsg:"邮箱格式为www@xxx.com" }, _companyname:{ //successMsg:"", errorMsg:"没有你输入的机构!", promptMsg:"请在所在的机构中选择" }, _phone:{ regex:/^1[3|4|5|8][0-9]\d{4,8}$/, successMsg:"", errorMsg:"你输入的手机号格式不正确!", promptMsg:"输入你的的手机号码!" }, _tel:{ //regex:/^[0][1-9]{2,3}[-][1-9]{1}[0-9]{8}$/, regex:/^[0-9]{3,4}[-]?[0-9]{9}$/, successMsg:"", errorMsg:"你输入的电话格式不正确!", promptMsg:"格式固定例如010-88888888!" }, _loginname:{ regex:/^[a-zA-Z]{1,1}[a-z0-9A-Z]{5,16}$/, successMsg:"", errorMsg:"你输入的用户名格式不正确!", promptMsg:"6-12位字符(字母、数字、汉字),首位必须为字母,区分大小写" }, _captcha:{ regex:/^[a-z0-9A-Z]{4}$/, successMsg:"", errorMsg:"你输入的验证码格式不正确!", promptMsg:"请输入验证码!" } }; /** *============================================================================================================================ *=========自定义验证方法验证方法============================================================================================== *============================================================================================================================ **/ $.firstpwd=""; $.verification={ //提示信息0:正常、1:错误、2:提示 _def:{//如果没有自定义的验证的话直接调用就可以了$.verification._def(obj); vf:function(obj){ varnum=0; if($.utilfun.regexcheck(obj)){ num=0; }else{ num=1; } return$.utilfun.showPrompt(num,obj); } }, _null:{//判断是否为空 vf:function(obj){ varnum=0; if(obj.val.trim()==""){ num=1; } return$.utilfun.showPrompt(num,obj,$.vfData["_null"]); } }, //===================================================需要特殊判断的================================================================= _companyname:{//机构名称验证 vf:function(obj){ varnum=1; for(varkeyin$.indexdata){ if(obj.val.trim()==key){ num=0; break; } } return$.utilfun.showPrompt(num,obj); } }, _firstpwd:{ vf:function(obj){ varnum=0; if($.utilfun.regexcheck(obj)){ $.firstpwd=obj.val; num=0; }else{ num=1; } return$.utilfun.showPrompt(num,obj); } }, _secondpwd:{ vf:function(obj){ varnum=0; varmd5val=hex_md5(obj.val); if($.firstpwd!=obj.val&&$.firstpwd!=""){ num=1; }else{ $("#YHMM").val(md5val.toUpperCase()); } return$.utilfun.showPrompt(num,obj); } }, _loginname:{//校验登录名的唯一性 vf:function(obj){ if($.verification._def.vf(obj)){//先验证格式 varparams={type:1,value:obj.val}; varnum=$.utilfun.ajaxvf("/registeruserverify.go",params); varmsg={errorMsg:"用户名已存在!"}; return$.utilfun.showPrompt(num,obj,msg); } } }, _email:{ vf:function(obj){//校验邮箱的的唯一性 if($.verification._def.vf(obj)){//先验证格式 varparams={type:2,value:obj.val}; varnum=$.utilfun.ajaxvf("/registeruserverify.go",params); varmsg={errorMsg:"此邮箱已经注册,请更换邮箱!"}; return$.utilfun.showPrompt(num,obj,msg); } } }, _phone:{ vf:function(obj){//验证手机号的唯一性 if($.verification._def.vf(obj)){//先验证格式 varparams={type:3,value:obj.val}; varnum=$.utilfun.ajaxvf("/registeruserverify.go",params); varmsg={errorMsg:"此手机号已经注册,请更换手机号!"}; return$.utilfun.showPrompt(num,obj,msg); } } }, //===================================================能够直接用正则表达式判断的===================================================== _code:{ vf:function(obj){ return$.verification._def.vf(obj); } }, _captcha:{ vf:function(obj){ return$.verification._def.vf(obj); } }, _tel:{ vf:function(obj){ return$.verification._def.vf(obj); } } }; /** *================================================================================================================================= *================公共方法========================================================================================================= *================================================================================================================================= */ $.utilfun={ //显示提示信息 showPrompt:function(re,obj,vfData){ vfData=(vfData==null?$.vfData[obj.fun] :vfData);//获取提示信息 varformElement=$("#"+obj.id).parent().parent().find("p"); try{ switch(re){ case0: formElement.html($.vfData.successhtml+(vfData.successMsg==null?"":vfData.successMsg)); returntrue; case1: formElement.css("color","red"); formElement.html($.vfData.errorhtml+vfData.errorMsg+"<aid='"+obj.id+"'name='"+obj.id+"'></a>"); returnfalse; case2: formElement.css("color","green"); formElement.html($.vfData.pormpthtml+vfData.promptMsg); break; default: formElement.html(""); returntrue; } }catch(e){ } }, regexcheck:function(obj){//正则表达式验证 varregex=$.vfData[obj.fun].regex; if(regex==null) returnfalse; regex=newRegExp(regex); returnregex.test(obj.val.trim()); returnregex.test(obj.val); }, createElementJson:function(obj){//根据表单的属性创建json对象以便以调用 varjson=eval("({'val':'"+obj.val()+"',"+"'id':'" +obj.attr("id")+"',"+"'regex':'"+obj.attr("regex") +"',"+"'fun':'"+obj.attr("fun")+"','must':'" +obj.attr("must")+"'})"); returnjson; }, getFormElement:function(obj){//把需要验证的表单元素加到数组中 $.elementVal=newArray(); obj.find("input[id*='reg_']").each(function(){ $.elementVal.push($.utilfun.createElementJson($(this))); }); }, verification:function(){//遍历验证 varsize=$.elementVal.length; varvfresult=true; for(vari=size-1;i>=0;i--){ varelementJson=$.elementVal[i]; varelementvfresult=$.utilfun.doverification(elementJson); console.info(elementJson.id); if(!elementvfresult){//给错误的表单元素添加锚点 $("#point").attr("href","#"+elementJson.id); } vfresult=vfresult&&elementvfresult; } returnvfresult; }, evalmodth:function(obj){ varfunpakger="$.verification."; varthispakger=obj.fun; varthismodth=".vf(obj)"; varthemodth=funpakger+thispakger+thismodth; returneval(themodth); }, doverification:function(obj){//执行验证方法 if(obj.must=="true"){//为必填项时 varvalisnull=$.verification._null.vf(obj); if(valisnull&&obj.fun!="undefined"){//如果有验证方法的话 if($.utilfun.defaultverification(obj)){ return$.utilfun.evalmodth(obj); } }else{ if(obj.val.trim()==""){ returnfalse; }else{ returntrue; } } }else{//不为必填项时 if(obj.fun!="undefined"){//如果有验证方法的话 if(obj.val.trim()!=""){ if($.utilfun.defaultverification(obj)){ return$.utilfun.evalmodth(obj); } }else{ $.utilfun.showPrompt(3,obj,$.vfData["_null"]); returntrue; } }else{ returntrue; } } }, defaultverification:function(obj){//必须验证的方法 varvfresult=true; //vfresult=$.verification._null.vf(obj);//添加每个表单必须检验的方法 returnvfresult; }, ajaxvf:function(url,params){//需要接口请求验证的 varnum=0; $.ajax({ type:"post", url:url, dataType:"xml", async:false, data:params, //contentType:"application/x-www-form-urlencoded;charset=utf-8", success:function(data){ varxmlobj=$.xml(data); varresult=$.getnode("CODE",xmlobj.find("RETURNINFO")); if("0"!=result){ num=1; } } }); returnnum; } }; /** *=============================================================================================================== *==========验证入口================================================================================= *=============================================================================================================== * **/ $.fn.regattrs=function(){ $.utilfun.getFormElement($(this)); varvfresult=$.utilfun.verification(); if(vfresult){ $(this).submit(); }else{ $("#point")[0].click(); } }; /* *单个验证 */ $.fn.regattr=function(){ $(this).blur(function(){ varelementJson=$.utilfun.createElementJson($(this)); $.utilfun.doverification(elementJson); }); $(this).find("input[type!='password']").keyup(function(){ varelementJson=$.utilfun.createElementJson($(this)); $.utilfun.doverification(elementJson); }); }; /* *获取光表时提示 */ $.fn.prompt=function(){ $(this).focus(function(){ varelementJson=$.utilfun.createElementJson($(this)); if(elementJson.must){ $.utilfun.showPrompt(2,elementJson); } }); }; /** *=============================================================================================================== *==========解决xml加载问题================================================================================= *=============================================================================================================== * **/ $.xml=function(data){ varxmlobj=null; if(window.ActiveXObject){ varxml; xml=newActiveXObject("Microsoft.XMLDOM"); xml.async=false; xml.loadXML(data); xmlobj=$(xml); }else{ xmlobj=$(data); } returnxmlobj; }; //获取节点 $.getnode=function(key,obj){ varnodevalue=obj.children(key).text(); returnnodevalue; }; }(jQuery));
调用方式
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>表单验证</title> =====引入=======表单验证js </head> <body> <!--锚点--> <aid="aaa"name="aaa"></a> <!--锚点--> <divid="content"> <divclass="content_top"> <divclass="register_jigou">机构用户注册</div> <divclass="content_top_login">我已经注册,现在就<ahref="/zzlc/jsp/login/login.jsp">登录</a></div> </div> <!--表单开始--> <formid="regform"method="post"action="/userregister.go"> <divclass="form_item"> <spanclass="labelfl">机构简称:</span> <divclass="item_inputfl"> <inputdisabled="disabled"autocomplete="off"id="reg_companysimplename"name="JGJC_SV"type="text"class="text"/> <inputtype="hidden"autocomplete="off"id="reg_companysimplename_form"name="JGJC_SV"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl">组织机构代码:</span> <divclass="item_inputfl"> <inputdisabled="disabled"autocomplete="off"id="reg_companycode"name="ZZJGDM_SV"type="text"class="text"/> <inputtype="hidden"autocomplete="off"id="reg_companycode_form"name="ZZJGDM_SV"/> <aname="ZCDZ_SV"></a> </div> <pclass="cuofl"></p> </div> <divclass="form_item"> <spanclass="labelfl">机构类别:</span> <divclass="item_inputfl"> <inputdisabled="disabled"autocomplete="off"id="reg_companytype"name="DWLX_SV"type="text"class="text"/> <inputtype="hidden"autocomplete="off"id="reg_companytype_form"name="DWLX_SV"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl">注册地址:</span> <divclass="item_inputfl"> <inputdisabled="disabled"autocomplete="off"id="reg_regaddress"name="ZCDZ_SV"type="text"class="text"/> <inputtype="hidden"autocomplete="off"id="reg_regaddress_form"name="ZCDZ_SV"/> </div> <pclass="duifl"></p> </div> <h3>个人信息</h3> <divclass="form_item"> <spanclass="labelfl"><b>*</b>登录名:</span> <divclass="item_inputfl"> <inputid="reg_loginname"fun="_loginname"value="wangjunadmin"name="YHM"must="true"type="text"class="text"/> </div> <pclass="duifl"></p> </div> <inputid="YHMM"value=""type="hidden"name="YHMM"></input> <divclass="form_item"> <spanclass="labelfl"><b>*</b>登录密码:</span> <divclass="item_inputfl"> <inputid="reg_pwd"autocomplete="off"value=""type="password"fun="_firstpwd"must="true"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>密码确认:</span> <divclass="item_inputfl"> <inputmd5=""autocomplete="off"id="reg_secondpwd"value=""fun="_secondpwd"must="true"type="password"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>姓名:</span> <divclass="item_inputfl"> <inputname="XM"id="reg_name"value=""must="true"type="text"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>性别:</span> <divclass="item_inputfl"style="text-align:center;"> <inputtype="hidden"class="text"value="男"name="XB_SV"id="XB_SV"/> <selectname="XB"id="reg_sex"> <optionvalue="1">男</option> <optionvalue="2">女</option> </select> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>电话:</span> <divclass="item_inputfl"> <inputname="DH"must="true"value="010-888888888"id="reg_tel"fun="_tel"type="text"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>手机:</span> <divclass="item_inputfl"> <inputname="PHONE"must="true"value="18610740826"id="reg_phone"fun="_phone"type="text"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>电子邮箱:</span> <divclass="item_inputfl"> <inputid="reg_email"fun="_email"value="wj_dreamfly@163.com"name="MAIL"must="true"type="text"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>联系地址:</span> <divclass="item_inputfl"> <inputid="reg_homeaddress"name="LXDZ"type="text"value="朝阳区"must="true"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>部门:</span> <divclass="item_inputfl"> <inputid="reg_emp"name="BM"type="text"value="信息部"must="true"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"><b>*</b>职务:</span> <divclass="item_inputfl"> <inputid="reg_duty"name="ZW"type="text"value="开发"must="true"class="text"/> </div> <pclass="duifl"></p> </div> <divclass="form_item"> <spanclass="labelfl"style="color:#FFF">。</span> <divclass="login_btnfl"> <ahref="javascript:void(0)"id="submit"> <spanstyle="width:270px;line-height:3em;text-align:center;background-image:url(images/regbut1216.png);display:block;color:white;">提交</span> </a> </div> </div> </form> <!--表单结束--> <ahref="#aaa"id="point"></a> </div> <divid="footer"></div> </body> </html> $(document).ready(function(){ $("#point").click();//用锚点自动定位第一个验证失败的表单 $("#submit").click(function(){//提交按钮 $("#regform").regattrs();//注册方法自动验证表单中所有的元素 }); $("input").regattr();//失去光标时验证 $("input").prompt();//获取光标是提示信息 });
PS:这里再为大家提供几款关于xml操作的在线工具供大家参考使用:
在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson
在线格式化XML/在线压缩XML:
http://tools.jb51.net/code/xmlformat
XML在线压缩/格式化工具:
http://tools.jb51.net/code/xml_format_compress
XML代码在线格式化美化工具:
http://tools.jb51.net/code/xmlcodeformat
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery操作xml技巧总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。