密码强度显示仿Google的

最新推荐文章于 2022-09-15 13:29:19 发布

原创最新推荐文章于 2022-09-15 13:29:19 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google #function #browser #null #safari #input

Javascript 专栏收录该内容

133 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的密码强度检测方法。通过分析密码组成元素，该方法能够评估密码强度并用颜色编码的进度条及文字提示展示结果。支持不同浏览器环境，并能根据密码长度及复杂度给出即时反馈。

JS代码(passwordstrength.js)： //密码强度; ratingMsgs = new Array(6); ratingMsgColors = new Array(6); barColors = new Array(6); ratingMsgs[0] = "Too short"; ratingMsgs[1] = "Weak"; ratingMsgs[2] = "General"; ratingMsgs[3] = "Strong"; ratingMsgs[4] = "Very Strong"; ratingMsgs[5] = "Unknow"; //If the password server is down ratingMsgColors[0] = "#676767"; ratingMsgColors[1] = "#aa0033"; ratingMsgColors[2] = "#f5ac00"; ratingMsgColors[3] = "#6699cc"; ratingMsgColors[4] = "#008000"; ratingMsgColors[5] = "#676767"; barColors[0] = "#dddddd"; barColors[1] = "#aa0033"; barColors[2] = "#ffcc33"; barColors[3] = "#6699cc"; barColors[4] = "#008000"; barColors[5] = "#676767"; function CreateRatePasswdReq(pwd) { if (!isBrowserCompatible) { return; } // if(!document.getElementById) return false; // var pwd = document.getElementById("pwd"); if(!pwd) return false; passwd=pwd.value; var min_passwd_len = 6; if (passwd.length < min_passwd_len) { if (passwd.length > 0) { DrawBar(0); } else { ResetBar(); } } else { //We need to escape the password now so it won't mess up with length test rating = checkPasswdRate(passwd); DrawBar(rating); } } function getElement(name) { if (document.all) { return document.all(name); } return document.getElementById(name); } function DrawBar(rating) { var posbar = getElement('posBar'); var negbar = getElement('negBar'); var passwdRating = getElement('passwdRating'); var barLength = getElement('passwdBar').width; if (rating >= 0 && rating <= 4) { //We successfully got a rating posbar.style.width = barLength / 4 * rating + "px"; negbar.style.width = barLength / 4 * (4 - rating) + "px"; } else { posbar.style.width = "0px"; negbar.style.width = barLength + "px"; rating = 5; // Not rated Rating } posbar.style.background = barColors[rating]; passwdRating.innerHTML = "<font color='" + ratingMsgColors[rating] + "'>" + ratingMsgs[rating] + "</font>"; } //Resets the password strength bar back to its initial state without any message showing. function ResetBar() { var posbar = getElement('posBar'); var negbar = getElement('negBar'); var passwdRating = getElement('passwdRating'); var barLength = getElement('passwdBar').width; posbar.style.width = "0px"; negbar.style.width = barLength + "px"; passwdRating.innerHTML = ""; } /* Checks Browser Compatibility */ 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 */ var isBrowserCompatible = Compatible(); //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122) //小写 return 4; else return 8; //特殊字符 } //bitTotal函数 //计算出当前密码当中一共有多少种模式 function bitTotal(num){ modes=0; for (i=0;i<4;i++){ if (num & 1) modes++; num>>>=1; } return modes; } //checkStrong函数 //返回密码的强度级别 function checkPasswdRate(sPW){ if (sPW.length<=4) return 0; //密码太短 Modes=0; for (i=0;i<sPW.length;i++){ //测试每一个字符的类别并统计一共有多少种模式. Modes|=CharMode(sPW.charCodeAt(i)); } return bitTotal(Modes); } 部分JSP代码： <TR bgColor=#AD8B4D> <TD align=right width="97"> <FONT color=#ff0000>*</FONT> <bean:message key="user.password" /> </TD> <TD width="387" align="left"> <INPUT class=input type=password maxLength=20 name=passwdMd5 id="passwdMd5" onKeyUp="CreateRatePasswdReq(this);"/> <table id=passwdBar cellSpacing=0 cellPadding=0 width=180 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> <font face="Arial, sans-serif" color=#808080 size=-1><strong> <div id="passwdRating"></div> </strong></font> </tr> </tbody> </table> </TD> </TR>