记录一个项目中用到的比较优秀的验证密码强度javascript

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #border #class #table #测试

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的密码强度检测算法。该算法通过分析密码中的数字、大小写字母及特殊字符等元素来评估密码的复杂度，并根据不同级别的密码强度显示不同颜色提示。文章提供了完整的JavaScript源代码和HTML调用示例。

说明：使用8421字节验证方式验证密码强度

javascript源代码：

//************************检查密码强度************************************* //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 checkStrong(sPW){ if (sPW.length<=5) return 0; //密码太短 Modes=0; for (i=0;i<sPW.length;i++){ //测试每一个字符的类别并统计一共有多少种模式. Modes|=CharMode(sPW.charCodeAt(i)); } return bitTotal(Modes); } //pwStrength函数 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 function pwStrength(pwd){ O_color="#eeeeee"; L_color="#FF0000"; M_color="#FF9900"; H_color="#33CC00"; if (pwd==null||pwd==''){ Lcolor=Mcolor=Hcolor=O_color; } else{ S_level=checkStrong(pwd); switch(S_level) { case 0: Lcolor=Mcolor=Hcolor=O_color; case 1: Lcolor=L_color; Mcolor=Hcolor=O_color; break; case 2: Lcolor=Mcolor=M_color; Hcolor=O_color; break; default: Lcolor=Mcolor=Hcolor=H_color; } } document.getElementById("strength_L").style.background=Lcolor; document.getElementById("strength_M").style.background=Mcolor; document.getElementById("strength_H").style.background=Hcolor; return; } //*************************************************************************

调用方式，HTML源代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"> <input name="Password" type="password" id="Password" class="LoginInput" maxlength="20" width="120" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> </td> </tr> <tr> <td width="37%"> <table border="0" cellspacing="1" cellpadding="0" style="background: #ccc; width: 145px"> <tr align="center" style="background: #eeeeee" mce_style="background: #eeeeee"> <td id="strength_L"> 弱 </td> <td id="strength_M"> 中 </td> <td id="strength_H"> 强 </td> </tr> </table> </td> <td width="63%" class="hui"> ←密码强度 </td> </tr> <tr> <td colspan="2"> <span class="huiz">安全提示：密码建议使用字母加数字组合</span> </td> </tr> </table>