靈感來自GOOGLE--Gmail的注冊表單,這是結合XMLHTTP和servlet以及客戶端腳本Javascript來實現的一個給死板的表單程序增加親和力的一個小玩意。下午看到遂花了幾小時模仿著寫了一個。前端代碼均來自GMAIL的表單注冊那里,后段驗證密碼強度的servlet是自己做的,算法有待商戳不過效果算是出來了。
·[xml,jsp,servlet]仿google判斷用戶密碼強度
先來看客戶端的JS代碼,命名文 ?gvUserReg.js
表單部分只是列出密碼選框部分
Servlet部分,驗證密碼強度的JAVA類
下面這個是強度驗證的servlet用到的一個正則表達式工具類,這里我只把我們這篇文章用到的其中一個方法貼出來給大家
·[xml,jsp,servlet]仿google判斷用戶密碼強度
先來看客戶端的JS代碼,命名文 ?gvUserReg.js
程序代碼: |
//?this?code?powered?by?google var?agt?=?navigator.userAgent.toLowerCase(); var?is_op?=?(agt.indexOf("opera")?!=?-1); var?is_ie?=?(agt.indexOf("msie")?!=?-1)?&&?document.all?&&?!is_op; var?is_ie5?=?(agt.indexOf("msie?5")?!=?-1)?&&?document.all?&&?!is_op; function?CreateXmlHttpReq(handler)?{ ??var?xmlhttp?=?null; ??if?(is_ie)?{ ????//?Guaranteed?to?be?ie5?or?ie6 ????var?control?=?(is_ie5)???"Microsoft.XMLHTTP"?:?"Msxml2.XMLHTTP"; ????try?{ ??????xmlhttp?=?new?ActiveXObject(control); ??????xmlhttp.onreadystatechange?=?handler; ????}?catch?(ex)?{ ??????//?TODO:?better?help?message ??????alert("You?need?to?enable?active?scripting?and?activeX?controls");?? ????} ??}?else?{ ????//?Mozilla ????xmlhttp?=?new?XMLHttpRequest(); ????xmlhttp.onload?=?handler; ????xmlhttp.onerror?=?handler; ??} ??return?xmlhttp; } alert(); //?XMLHttp?send?POST?request function?XmlHttpPOST(xmlhttp,?url,?data)?{ ??try?{ ????xmlhttp.open("POST",?url,?true); ????xmlhttp.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded;?charset=UTF-8"); ????xmlhttp.send(data); ??}?catch?(ex)?{ ????//?do?nothing ??} } //?XMLHttp?send?GEt?request function?XmlHttpGET(xmlhttp,?url)?{ ??try?{ ????xmlhttp.open("GET",?url,?true); ????xmlhttp.send(null); ??}?catch?(ex)?{ ????//?do?nothing ??} } ?var?myxmlhttp; ??var?isBrowserCompatible; ??var?hidePasswordBar; ??ratingMsgs?=?new?Array(6); ??ratingMsgColors?=?new?Array(6); ??barColors?=?new?Array(6); ??ratingMsgs[0]?=?"未評級"; ??ratingMsgs[1]?=?"太短"; ??ratingMsgs[2]?=?"弱"; ??ratingMsgs[3]?=?"一般"; ??ratingMsgs[4]?=?"很好"; ??ratingMsgs[5]?=?"極佳";?//If?the?password?server?is?down ??ratingMsgColors[0]?=?"#808080"; ??ratingMsgColors[1]?=?"#da5301"; ??ratingMsgColors[2]?=?"#ccbe00"; ??ratingMsgColors[3]?=?"#1e91ce"; ??ratingMsgColors[4]?=?"#0000FF"; ??ratingMsgColors[5]?=?"#ff0000"; ??barColors[0]?=?"#e0e0e0"; ??barColors[1]?=?"#da5301"; ??barColors[2]?=?"#f0e54b"; ??barColors[3]?=?"#1e91ce"; ??barColors[4]?=?"#0000FF"; ??barColors[5]?=?"#ff0000"; ??hidePasswordBar?=?false; ??function?CreateRateUserPassReq(formKey)?{ ????if?(!isBrowserCompatible)?{ ??????return; ????} ????var?passwd?=?document.forms[formKey].gvUserPass.value; var?min_passwd_len?=?6; ????var?passwdKey?=?"passwd"; ????if?(passwd.length?<?min_passwd_len)?{ ???? DrawBar(1); ????}else{ ?? ??//We?need?to?escape?the?password?now?so?it?won't?mess?up?with?length?test ??????passwd?=?escape(passwd); ??????var?params?=?passwdKey?+?"="?+?passwd ??????myxmlhttp?=?CreateXmlHttpReq(RateUserPassXmlHttpHandler); ??????XmlHttpPOST(myxmlhttp,?"/club/rateUserPass.gv",?params); ????} ??} ??function?getElement(name)?{ ????if?(document.all)?{ ??????return?document.all(name); ????} ????return?document.getElementById(name); ??} ??function?RateUserPassXmlHttpHandler()?{ ????//?Can't?check?status?since?safari?doesn't?support?it ????if?(myxmlhttp.readyState?!=4?)?{ ??????return; ????} ????rating?=?parseInt(myxmlhttp.responseText); ????DrawBar(rating); ??} ??function?DrawBar(rating)?{ ????var?posbar?=?getElement('posBar'); ????var?negbar?=?getElement('negBar'); ????var?passwdRating?=?getElement('passwdRating'); ????var?barLength?=?getElement('passwdBarDiv').width; ????if?(rating?>=?0?&&?rating?<=?5)?{??//We?successfully?got?a?rating ??????posbar.style.width?=?barLength?/?5?*?rating; ??????negbar.style.width?=?barLength?/?5?*?(5?-?rating); ????}?else?{ ??????posbar.style.width?=?0; ??????negbar.style.width?=?barLength; ??????rating?=?5;?//?Not?rated?Rating ????} ????posbar.style.background?=?barColors[rating] ????passwdRating.innerHTML?=?"<font?color='"?+?ratingMsgColors[rating]?+ ?????????????????????????????"'>"?+?ratingMsgs[rating]?+?"</font>"; ??} |
表單部分只是列出密碼選框部分
程序代碼: |
要引入剛才那個JS文件 <script?language="javascript"?src="gvUserReg.js"></script> <form?action="userRegPost.jsp"?method="post"??name="Gforms"?onSubmit="return?CheckForm();"> <table?width="100%"??border="0"?cellpadding="0"?cellspacing="0"> ????????<tr> ????????<td?width="100"><input?style="width:200?px"?onKeyUp="CreateRateUserPassReq('Gforms')"?name="gvUserPass"?type="password"?id="gvUserPass"?size="30"?maxlength="30"?/>????????????</td> ????????<td?width="10"></td><td> <TABLE??width="200"?border=0?cellPadding=0?cellSpacing=0?> <TBODY><TR><TD?vAlign=top?noWrap?width=0> <A?href="#">密碼強度:</A>? </TD> <TD><DIV??id="passwdRating">太短</DIV> </TD></TR><TR><TD?height=3></TD></TR> <TR><TD?colSpan=2> <TABLE??id="passwdBarDiv"?cellSpacing=0?cellPadding=0?width="200"??bgColor="#ffffff"?border=0> <TBODY><TR> <TD?id="posBar"?width="0%"?bgColor="#e0e0e0"?height="4"></TD> <TD?id="negBar"?width="100%"?bgColor="#e0e0e0"??height="4"></TD> </TR></TBODY> </TABLE> </TD></TR> </TBODY></TABLE> </td> ????</tr> ????</table> <script?language="javascript"> <!-- /*?Checks?Browser?Compatibility?*/ //document.getElementById("passwdBarDiv").style.display?=?"block"; var?agt?=?navigator.userAgent.toLowerCase(); var?is_op?=?(agt.indexOf("opera")?!=?-1); var?is_ie?=?(agt.indexOf("msie")?!=?-1)?&&?document.all?&&?!is_op; var?is_mac?=?(agt.indexOf("mac")?!=?-1); var?is_gk?=?(agt.indexOf("gecko")?!=?-1); var?is_sf?=?(agt.indexOf("safari")?!=?-1); function?gff(str,?pfx)?{ var?i?=?str.indexOf(pfx); if?(i?!=?-1)?{ var?v?=?parseFloat(str.substring(i?+?pfx.length)); if?(!isNaN(v))?{ return?v; } } return?null; } function?Compatible()?{ if?(is_ie?&&?!is_op?&&?!is_mac)?{ var?v?=?gff(agt,?"msie?"); if?(v?!=?null)?{ return?(v?>=?6.0); } } if?(is_gk?&&?!is_sf)?{ var?v?=?gff(agt,?"rv:"); if?(v?!=?null)?{ return?(v?>=?1.4); }else{ v?=?gff(agt,?"galeon/"); if?(v?!=?null)?{ return?(v?>=?1.3); } } } if?(is_sf)?{ var?v?=?gff(agt,?"applewebkit/"); if?(v?!=?null)?{ return?(v?>=?124); } } return?false; } ??/*?We?also?try?to?create?an?xmlhttp?object?to?see?if?the?browser?supports?it?*/ myxmlhttp?=?CreateXmlHttpReq(RateUserPassXmlHttpHandler); isBrowserCompatible?=?Compatible()?&&?myxmlhttp; if?(!isBrowserCompatible?||?hidePasswordBar)?{ document.getElementById("passwdBarDiv").style.display?=?"none"; } //-->? </script> </form> |
Servlet部分,驗證密碼強度的JAVA類
程序代碼: |
/*? ?*?2005-12-14 ?*?Made?in?GamVan ?*/ package?com.gamvan.club.servlet; import?java.io.IOException; import?java.io.PrintWriter; import?javax.servlet.ServletException; import?javax.servlet.http.HttpServlet; import?javax.servlet.http.HttpServletRequest; import?javax.servlet.http.HttpServletResponse; import?com.gamvan.tools.EncodeString; /** ?*?@author?GamVan?by?我容易么我 ?*?Powered?by?GamVan.com ?*/ public?class?RateUserPass?extends?HttpServlet?{ private?static?final?long?serialVersionUID?=?1L; private?int?rate?=?0; /** ?*?口令強弱等級判定,強度算法有待商戳,功能基本實現 ?*?@param?pass ?*?@return ?*?2005-12-14?16:55:03?Made?In?GamVan ?*?com.gamvan.club.servlet ?*/ public?int?rateUserPass(String?pass){ /* ?*?i?值指示口令等級 ?*?0?不合法口令 ?*?1?太短 ?*?2?弱 ?*?3?一般 ?*?4?很好 ?*?5?極佳 ?*/ int?i?=?0; if(pass==null?||?pass.length()==0){ return?0; } int?hasLetter?=?EncodeString.matcherStr(pass,"[a-zA-Z]","").length(); int?hasNumber?=?EncodeString.matcherStr(pass,"[0-9]","").length(); int?passLen?=?pass.length(); if(passLen>=6){ /*?如果僅包含數字或僅包含字母?*/ if((passLen-hasLetter)==0?||?(passLen-hasNumber)==0){ if(passLen<8){ i?=?2; }else?{ i?=?3; } } /*?如果口令大于6位且即包含數字又包含字母?*/ else?if(hasLetter>0?&&?hasNumber>0){? if(passLen>=10){ i?=?5; }else?if(passLen>=8){ i?=?4; }else{ i?=?3; } } /*?如果既不包含數字又不包含字母?*/ else?if(hasLetter==0?&&?hasNumber==0){ if(passLen>=7){ i?=?5; }else{ i?=?4; } } /*?字母或數字有一方為0?*/ else?if(hasNumber==0||hasLetter==0){ if((passLen-hasLetter)==0?||?(passLen-hasNumber)==0){ i?=?2; } /*? ?*?字母數字任意一種類型小于6且總長度大于等于6 ?*?則說明此密碼是字母或數字加任意其他字符組合而成 ?*/ else{ if(passLen>8){ i?=?5; }else?if(passLen==8){ i?=?4; }else{ i?=?3; } } } }else{?//口令小于6位則顯示太短 if(passLen>0){ i?=?1;?//口令太短 }else{ i?=?0; } } return?i; } public?void?service(HttpServletRequest?request,HttpServletResponse?response) throws?ServletException,?IOException? { String?userPass?=?request.getParameter("passwd"); rate?=?rateUserPass(userPass); response.setContentType("text/HTML;charset=UTF-8");? PrintWriter?out?=?response.getWriter(); out.print(rate); out.close(); if(true)return; return?; } } |
下面這個是強度驗證的servlet用到的一個正則表達式工具類,這里我只把我們這篇文章用到的其中一個方法貼出來給大家
程序代碼: |
/*? ?*?Made?in?GamVan ?*/ package?com.gamvan.tools; import?java.io.UnsupportedEncodingException; import?java.security.MessageDigest; import?sun.misc.BASE64Encoder; import?java.util.regex.*; import?com.gamvan.tools.MD5; /** ?*?字符串操作集合類 ?*?@author?GamVan?by?我容易么我 ?*?Powered?by?GamVan.com ?*/ public?class?EncodeString{ ????/** ?????*?循環找出匹配內容 ?????*?@param?str ?????*?@param?cp ?????*?@param?s ?????*?@return ?????*?2005-12-11?18:45:25?Made?In?GamVan ?????*?com.gamvan.tools ?????*/ ????public?static?String?matcherStr(String?str,?String?cp,?String?s){ ????????if(str==null?||?str.equals("")){ ????????????return?""; ????????} ????????String?txt?=?new?String(); ????????txt?=?str; ????????if(str!=null?&&?!str.equals("")){ ????????????txt?=?str; ????????????Pattern?p?=?Pattern.compile(cp,2);?//參數2表示大小寫不區分 ????????????Matcher?m?=?p.matcher(txt); ????????????StringBuffer?sb?=?new?StringBuffer(); ????????????int?i=0; ????????????boolean?result?=?m.find(); ????????????//使用循環將句子里所有匹配的內容找出并替換再將內容加到sb里 ????????????while(result)?{ ????????????????i++; ????????????????sb.append(m.group()); ????????????????sb.append(s); ????????????????//繼續查找下一個匹配對象 ????????????????result?=?m.find(); ????????????} ????????????txt?=?String.valueOf(sb); ????????}else{ ????????????txt?=?""; ????????} ????????return?txt;??????? ????} } |
地球人都知道servlet需要部署才能用我這里這個應用在web.xml是這么部署的!大家可以根據需要自己改。
程序代碼: |
<servlet> <servlet-name>RateUserPass</servlet-name> <servlet-class>com.gamvan.club.servlet.RateUserPass</servlet-class> </servlet> <servlet-mapping> <servlet-name>RateUserPass</servlet-name> <url-pattern>/club/rateUserPass.gv</url-pattern> </servlet-mapping> |