javascript 检测密码强度
2014-01-15 17:08
387 查看
<!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 runat="server"> <title></title> <script type="text/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 <= 4) 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: document.getElementById("msg").innerHTML='?'; Lcolor = Mcolor = Hcolor = O_color; case 1: Lcolor = L_color; Mcolor = Hcolor = O_color; document.getElementById("msg").innerHTML='Weak'; break; case 2: Lcolor = Mcolor = M_color; Hcolor = O_color; document.getElementById("msg").innerHTML='Normal'; break; default: document.getElementById("msg").innerHTML='Strong'; 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; } </script> </head> <body> <form name="form1" action=""> 输入密码:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> <br> 密码强度: <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display: inline'> <tr align="center" bgcolor="#eeeeee"> <td width="33%" id="strength_L"> 弱 </td> <td width="33%" id="strength_M"> 中 </td> <td width="33%" id="strength_H"> 强 </td> </tr> </table> </form> <div id="msg"></div> </body> </html>
相关文章推荐
- javascript 事件流
- javascript中验证大写字母、数字和中文
- JS记录用户登录次数的代码
- JavaScript对象字面量
- JS事件(Event)兼容性探究
- EXTJs4——树的应用----数据动态生成树
- JS记录用户登录次数实现代码
- seajs学习
- Qml 和外部js文件协同工作
- 解决ExtJs纵坐标值重复的问题
- js通过指定下标或指定元素进行删除数组
- js回避ie缓存的办法
- svg js
- JSP入门开发日志二
- JS字符串转换数字(转)
- javascript执行顺序
- javascript总结
- javascript小记-javascript运行机制
- js正则收集_mark
- js地图专业户