标签：
密码输入强度提示实例代码:
现在众多的网站的注册表单，在填写密码的时候能够实时的给出密码强度提示，这可以提醒用户当前输入的密码安全程度，算是非常人性化的一个举措，下面就通过一个实例简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>密码强度提示功能-蚂蚁部落</title> <script type="text/javascript"> 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; } } function bitTotal(num) { modes=0; for(i=0;i<4;i++) { if(num&1) modes++; num>>>=1; } return modes; } 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); } 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; } window.onload=function() { var pw=document.getElementById("pw"); pw.onkeyup=function() { pwStrength(this.value) } pw.onBlur=function() { pwStrength(this.value) } } </script> </head> <body> <table width="250" cellpadding="2"> <tr> <td width="40%" align="right">密码:</td> <td colspan="3" align="left"> <input type="password" size="20" id="pw" /> </td> </tr> <tr align="center"> <td width="40%" align="right">密码强度:</td> <td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td> <td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td> <td width="20%" id="strength_H" bgcolor="#f5f5f5">强</td> </tr> </table> </body> </html>
以上代码实现了我们的要求，当输入密码的时候，能够以颜色的形式实时提醒输入密码的强度，代码直接套用就可以了，有兴趣的朋友可以自行分析一下，如有任何问题，可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8922
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/zhadanren/p/5095815.html
