jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
本文實(shí)例講述了jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法。分享給大家供大家參考,具體如下:
此處表單驗(yàn)證jQuery 引用jquery.1.8.2.js,md5.js
擴(kuò)展提示信息,擴(kuò)展驗(yàn)證方法(如果有正則表達(dá)式的話可以用默認(rèn)方法)
String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解決trim 方法問題 (function($) { $.elementVal = new Array(); /** ******************************************************************************************************************************************** * ========自定義提示語(yǔ)============================================================================================================== * ========regex、如果有正則表達(dá)式的話=============================================================================================== * ========successMsg、驗(yàn)證成功時(shí)==================================================================================================== * ========errorMsg、驗(yàn)證失敗時(shí)====================================================================================================== * promptMsg、提示語(yǔ)=================================================================================================================*********************** **/ $.vfData = { errorhtml:'<img src="images/cuo_biao.png"> ', successhtml:'<img src="images/dui_biao.png" /> ', pormpthtml:'<img src="images/tishi_biao.png"> ', _null : { //successMsg : "", errorMsg : "不能為空!", promptMsg : "不能為中文" }, _firstpwd:{ regex:/^[a-z0-9_-]{6,18}$/, //successMsg : "", errorMsg : "密碼格式不正確!", promptMsg : "6-16位字符(字母或數(shù)字),區(qū)分大小寫" }, _code:{ regex:/^[a-z0-9_-]{6,18}$/, //successMsg : "", errorMsg : "機(jī)構(gòu)代碼不正確!", promptMsg : "機(jī)構(gòu)代碼為自填項(xiàng)!" }, _secondpwd:{ //successMsg : "", errorMsg : "兩次密碼不一致!,請(qǐng)確保初次密碼格式正確", promptMsg : "請(qǐng)?jiān)俅屋斎朊艽a" }, _email : { regex:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, //successMsg : "", errorMsg : "郵箱地址格式不正確!", promptMsg : "郵箱格式為www@xxx.com" }, _companyname : { //successMsg : "", errorMsg : "沒有你輸入的機(jī)構(gòu)!", promptMsg : "請(qǐng)?jiān)谒诘臋C(jī)構(gòu)中選擇" }, _phone:{ regex :/^1[3|4|5|8][0-9]\d{4,8}$/, successMsg : "", errorMsg : "你輸入的手機(jī)號(hào)格式不正確!", promptMsg : "輸入你的的手機(jī)號(hào)碼!" }, _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位字符(字母、數(shù)字、漢字),首位必須為字母,區(qū)分大小寫" }, _captcha:{ regex:/^[a-z0-9A-Z]{4}$/, successMsg : "", errorMsg : "你輸入的驗(yàn)證碼格式不正確!", promptMsg : "請(qǐng)輸入驗(yàn)證碼!" } }; /** * ============================================================================================================================ * =========自定義驗(yàn)證方法驗(yàn)證方法============================================================================================== * ============================================================================================================================ * */ $.firstpwd=""; $.verification = { // 提示信息 0:正常、1:錯(cuò)誤 、2:提示 _def:{//如果沒有自定義的驗(yàn)證的話直接調(diào)用就可以了$.verification._def(obj); vf:function(obj){ var num = 0; if ($.utilfun.regexcheck(obj)) { num = 0; } else { num = 1; } return $.utilfun.showPrompt(num, obj); } }, _null : {//判斷是否為空 vf:function(obj){ var num=0; if(obj.val.trim() == ""){ num=1; } return $.utilfun.showPrompt(num, obj,$.vfData["_null"]); } }, //===================================================需要特殊判斷的================================================================= _companyname : {// 機(jī)構(gòu)名稱驗(yàn)證 vf : function(obj) { var num = 1; for(var key in $.indexdata){ if(obj.val.trim()==key){ num=0; break; } } return $.utilfun.showPrompt(num, obj); } }, _firstpwd:{ vf : function(obj) { var num = 0; if ($.utilfun.regexcheck(obj)) { $.firstpwd=obj.val; num = 0; }else{ num=1; } return $.utilfun.showPrompt(num, obj); } }, _secondpwd:{ vf : function(obj) { var num = 0; var md5val=hex_md5(obj.val); if ($.firstpwd!=obj.val&&$.firstpwd!="") { num = 1; }else{ $("#YHMM").val(md5val.toUpperCase()); } return $.utilfun.showPrompt(num, obj); } }, _loginname:{//校驗(yàn)登錄名的唯一性 vf : function(obj) { if($.verification._def.vf(obj)){//先驗(yàn)證格式 var params={type:1,value:obj.val}; var num=$.utilfun.ajaxvf("/registeruserverify.go",params); var msg={errorMsg : "用戶名已存在!"}; return $.utilfun.showPrompt(num, obj,msg); } } }, _email : { vf : function(obj) {//校驗(yàn)郵箱的的唯一性 if($.verification._def.vf(obj)){//先驗(yàn)證格式 var params={type:2,value:obj.val}; var num=$.utilfun.ajaxvf("/registeruserverify.go",params); var msg={errorMsg : "此郵箱已經(jīng)注冊(cè),請(qǐng)更換郵箱!"}; return $.utilfun.showPrompt(num, obj,msg); } } }, _phone:{ vf:function(obj){//驗(yàn)證手機(jī)號(hào)的唯一性 if($.verification._def.vf(obj)){//先驗(yàn)證格式 var params={type:3,value:obj.val}; var num=$.utilfun.ajaxvf("/registeruserverify.go",params); var msg={errorMsg : "此手機(jī)號(hào)已經(jīng)注冊(cè),請(qǐng)更換手機(jī)號(hào)!"}; return $.utilfun.showPrompt(num, obj,msg); } } }, //===================================================能夠直接用正則表達(dá)式判斷的===================================================== _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);//獲取提示信息 var formElement = $("#" + obj.id).parent().parent().find("p"); try { switch (re) { case 0: formElement.html($.vfData.successhtml+(vfData.successMsg==null?"":vfData.successMsg)); return true; case 1: formElement.css("color", "red"); formElement.html($.vfData.errorhtml+vfData.errorMsg+"<a id='"+obj.id+"' name='"+obj.id+"'></a>"); return false; case 2: formElement.css("color", "green"); formElement.html($.vfData.pormpthtml+vfData.promptMsg); break; default: formElement.html(""); return true; } } catch (e) { } }, regexcheck : function(obj) {// 正則表達(dá)式驗(yàn)證 var regex = $.vfData[obj.fun].regex; if (regex == null) return false; regex = new RegExp(regex); return regex.test(obj.val.trim()); return regex.test(obj.val); }, createElementJson : function(obj) {// 根據(jù)表單的屬性創(chuàng)建json對(duì)象以便以調(diào)用 var json = eval("({'val':'" + obj.val() + "'," + "'id':'" + obj.attr("id") + "'," + "'regex':'" + obj.attr("regex") + "'," + "'fun':'" + obj.attr("fun") + "','must':'" + obj.attr("must") + "'})"); return json; }, getFormElement : function(obj) {// 把需要驗(yàn)證的表單元素加到數(shù)組中 $.elementVal = new Array(); obj.find("input[id*='reg_']").each(function() { $.elementVal.push($.utilfun.createElementJson($(this))); }); }, verification : function() {// 遍歷驗(yàn)證 var size = $.elementVal.length; var vfresult=true; for (var i = size - 1; i >= 0; i--) { var elementJson = $.elementVal[i]; var elementvfresult=$.utilfun.doverification(elementJson); console.info(elementJson.id); if(!elementvfresult){//給錯(cuò)誤的表單元素添加錨點(diǎn) $("#point").attr("href","#"+elementJson.id); } vfresult=vfresult&&elementvfresult; } return vfresult; }, evalmodth : function(obj) { var funpakger = "$.verification."; var thispakger = obj.fun; var thismodth = ".vf(obj)"; var themodth = funpakger + thispakger + thismodth; return eval(themodth); }, doverification : function(obj) {// 執(zhí)行驗(yàn)證方法 if(obj.must == "true"){//為必填項(xiàng)時(shí) var valisnull=$.verification._null.vf(obj); if(valisnull&&obj.fun != "undefined"){//如果有驗(yàn)證方法的話 if($.utilfun.defaultverification(obj)){ return $.utilfun.evalmodth(obj); } }else { if(obj.val.trim()==""){ return false; }else{ return true; } } }else{//不為必填項(xiàng)時(shí) if(obj.fun != "undefined"){//如果有驗(yàn)證方法的話 if(obj.val.trim()!=""){ if($.utilfun.defaultverification(obj)){ return $.utilfun.evalmodth(obj); } }else{ $.utilfun.showPrompt(3, obj,$.vfData["_null"]); return true; } }else{ return true; } } }, defaultverification : function(obj) {// 必須驗(yàn)證的方法 var vfresult = true; // vfresult = $.verification._null.vf(obj);//添加每個(gè)表單必須檢驗(yàn)的方法 return vfresult; }, ajaxvf:function(url,params){//需要接口請(qǐng)求驗(yàn)證的 var num=0; $.ajax({ type :"post", url : url, dataType:"xml", async : false, data : params, // contentType : "application/x-www-form-urlencoded; charset=utf-8", success:function(data){ var xmlobj= $.xml(data); var result= $.getnode("CODE",xmlobj.find("RETURNINFO")); if("0"!=result){ num=1; } } }); return num; } }; /** * =============================================================================================================== * ========== 驗(yàn)證入口 ================================================================================= * =============================================================================================================== * * */ $.fn.regattrs = function() { $.utilfun.getFormElement($(this)); var vfresult=$.utilfun.verification(); if(vfresult){ $(this).submit(); }else{ $("#point")[0].click(); } }; /* * 單個(gè)驗(yàn)證 */ $.fn.regattr = function() { $(this).blur(function() { var elementJson = $.utilfun.createElementJson($(this)); $.utilfun.doverification(elementJson); }); $(this).find("input[type!='password']").keyup(function() { var elementJson = $.utilfun.createElementJson($(this)); $.utilfun.doverification(elementJson); }); }; /* * 獲取光表時(shí)提示 */ $.fn.prompt = function() { $(this).focus(function() { var elementJson = $.utilfun.createElementJson($(this)); if (elementJson.must) { $.utilfun.showPrompt(2, elementJson); } }); }; /** * =============================================================================================================== * ========== 解決xml加載問題 ================================================================================= * =============================================================================================================== * * */ $.xml=function(data){ var xmlobj=null; if(window.ActiveXObject){ var xml; xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); xmlobj=$(xml); }else{ xmlobj=$(data); } return xmlobj; }; //獲取節(jié)點(diǎn) $.getnode=function(key,obj){ var nodevalue=obj.children(key).text(); return nodevalue; }; }(jQuery));
調(diào)用方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>表單驗(yàn)證</title> =====引入=======表單驗(yàn)證 js </head> <body> <!-- 錨點(diǎn) --> <a id="aaa" name="aaa"></a> <!-- 錨點(diǎn) --> <div id="content"> <div class="content_top"> <div class="register_jigou">機(jī)構(gòu)用戶注冊(cè)</div> <div class="content_top_login">我已經(jīng)注冊(cè),現(xiàn)在就<a href="/zzlc/jsp/login/login.jsp">登錄</a></div> </div> <!-- 表單開始 --> <form id="regform" method="post" action="/userregister.go"> <div class="form_item"> <span class="label fl">機(jī)構(gòu)簡(jiǎn)稱:</span> <div class="item_input fl"> <input disabled="disabled" autocomplete="off" id="reg_companysimplename" name="JGJC_SV" type="text" class="text" /> <input type="hidden" autocomplete="off" id="reg_companysimplename_form" name="JGJC_SV"/> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl">組織機(jī)構(gòu)代碼:</span> <div class="item_input fl"> <input disabled="disabled" autocomplete="off" id="reg_companycode" name="ZZJGDM_SV" type="text" class="text" /> <input type="hidden" autocomplete="off" id="reg_companycode_form" name="ZZJGDM_SV"/> <a name="ZCDZ_SV"></a> </div> <p class="cuo fl"></p> </div> <div class="form_item"> <span class="label fl">機(jī)構(gòu)類別:</span> <div class="item_input fl" > <input disabled="disabled" autocomplete="off" id="reg_companytype" name="DWLX_SV" type="text" class="text"/> <input type="hidden" autocomplete="off" id="reg_companytype_form" name="DWLX_SV"/> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl">注冊(cè)地址:</span> <div class="item_input fl"> <input disabled="disabled" autocomplete="off" id="reg_regaddress" name="ZCDZ_SV" type="text" class="text" /> <input type="hidden" autocomplete="off" id="reg_regaddress_form" name="ZCDZ_SV"/> </div> <p class="dui fl"></p> </div> <h3>個(gè)人信息</h3> <div class="form_item"> <span class="label fl"><b>*</b>登錄名:</span> <div class="item_input fl"> <input id="reg_loginname" fun="_loginname" value="wangjunadmin" name="YHM" must="true" type="text" class="text" /> </div> <p class="dui fl"></p> </div> <input id="YHMM" value="" type="hidden" name="YHMM"></input> <div class="form_item"> <span class="label fl"><b>*</b>登錄密碼:</span> <div class="item_input fl"> <input id="reg_pwd" autocomplete="off" value="" type="password" fun="_firstpwd" must="true" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>密碼確認(rèn):</span> <div class="item_input fl"> <input md5="" autocomplete="off" id="reg_secondpwd" value="" fun="_secondpwd" must="true" type="password" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>姓名:</span> <div class="item_input fl"> <input name="XM" id="reg_name" value="" must="true" type="text" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>性別:</span> <div class="item_input fl" style="text-align: center;"> <input type="hidden" class="text" value="男" name="XB_SV" id="XB_SV"/> <select name="XB" id="reg_sex"> <option value="1">男</option> <option value="2">女</option> </select> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>電話:</span> <div class="item_input fl"> <input name="DH" must="true" value="010-888888888" id="reg_tel" fun="_tel" type="text" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>手機(jī):</span> <div class="item_input fl"> <input name="PHONE" must="true" value="18610740826" id="reg_phone" fun="_phone" type="text" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>電子郵箱:</span> <div class="item_input fl"> <input id="reg_email" fun="_email" value="wj_dreamfly@163.com" name="MAIL" must="true" type="text" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>聯(lián)系地址:</span> <div class="item_input fl"> <input id="reg_homeaddress" name="LXDZ" type="text" value="朝陽(yáng)區(qū)" must="true" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>部門:</span> <div class="item_input fl"> <input id="reg_emp" name="BM" type="text" value="信息部" must="true" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl"><b>*</b>職務(wù):</span> <div class="item_input fl"> <input id="reg_duty" name="ZW" type="text" value="開發(fā)" must="true" class="text" /> </div> <p class="dui fl"></p> </div> <div class="form_item"> <span class="label fl" style="color:#FFF">。</span> <div class="login_btn fl"> <a href="javascript:void(0)" id="submit"> <span style="width:270px; line-height:3em; text-align: center; background-image:url(images/regbut1216.png); display:block;color: white; ">提交</span> </a> </div> </div> </form> <!-- 表單結(jié)束 --> <a href="#aaa" id="point"></a> </div> <div id="footer"></div> </body> </html> $(document).ready(function() { $("#point").click();//用錨點(diǎn)自動(dòng)定位第一個(gè)驗(yàn)證失敗的表單 $("#submit").click(function() {//提交按鈕 $("#regform").regattrs();//注冊(cè)方法自動(dòng)驗(yàn)證表單中所有的元素 }); $("input").regattr();//失去光標(biāo)時(shí)驗(yàn)證 $("input").prompt();//獲取光標(biāo)是提示信息 });
PS:這里再為大家提供幾款關(guān)于xml操作的在線工具供大家參考使用:
在線XML/JSON互相轉(zhuǎn)換工具:
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
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作xml技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery 表單驗(yàn)證擴(kuò)展(四)
- jQuery 表單驗(yàn)證擴(kuò)展(三)
- jQuery 表單驗(yàn)證擴(kuò)展代碼(二)
- jQuery 表單驗(yàn)證擴(kuò)展代碼(一)
- jquery validate.js表單驗(yàn)證的基本用法入門
- jquery表單驗(yàn)證使用插件formValidator
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁(yè)功能的方法
- jQuery解析XML 詳解及方法總結(jié)
- jQuery+ajax讀取并解析XML文件的方法
相關(guān)文章
Javascript 鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無非是一個(gè)語(yǔ)法技巧而已,我就學(xué)Jquery寫了一個(gè)粗淺的庫(kù)。2010-05-05jQuery中的類名選擇器(.class)用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery中的類名選擇器(.class)用法,簡(jiǎn)單介紹了jQuery類名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類選擇器的簡(jiǎn)單使用方法,需要的朋友可以參考下2018-05-05jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動(dòng)畫過渡效果都是通過easing函數(shù)實(shí)現(xiàn)的,下面是自己研究之后對(duì)其的基本認(rèn)識(shí)2014-08-08jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
本文我們給大家介紹如何使用jQuery+Ajax+PHP彈出層異步登錄的應(yīng)用。感興趣的朋友通過本文學(xué)習(xí)吧2016-05-05給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接(之一)
我這里用的不是jqGrid的自帶的編輯和刪除操作,我已經(jīng)把分頁(yè)導(dǎo)航欄下的編輯,刪除,搜索都取消掉了2011-11-11打造基于jQuery的高性能TreeView(asp.net)
項(xiàng)目中經(jīng)常會(huì)遇到樹形數(shù)據(jù)的展現(xiàn),包括導(dǎo)航,選擇等功能,所以樹控件在大多項(xiàng)目中都是必須的。那一個(gè)實(shí)用的樹應(yīng)該具備什么功能呢?2011-02-02jquery輪播的實(shí)現(xiàn)方式 附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式,文中分享了jQuery輪播完整實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07