js实现密码强度验证 

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
 4 <script src="./js/jquery-1.8.0.min.js"></script>
 5 <script type="text/javascript">
 6 //CharMode函数  
 7 //测试某个字符是属于哪一类.  
 8 function CharMode(iN){  
 9 if (iN>=48 && iN <=57) //数字  
10 return 1;  
11 if (iN>=65 && iN <=90) //大写字母  
12 return 2;  
13 if (iN>=97 && iN <=122) //小写  
14 return 4;  
15 else 
16 return 8; //特殊字符  
17 }  
18  
19 //bitTotal函数  
20 //计算出当前密码当中一共有多少种模式  
21 function bitTotal(num){  
22 modes=0;  
23 for (i=0;i<4;i++){  
24 if (num & 1) modes++;  
25 num>>>=1;  
26 }  
27 return modes;  
28 }  
29  
30 //checkStrong函数  
31 //返回密码的强度级别  
32  
33 function checkStrong(sPW){  
34 if (sPW.length<=4)  
35 return 0; //密码太短  
36 Modes=0;  
37 for (i=0;i<sPW.length;i++){  
38 //测试每一个字符的类别并统计一共有多少种模式.  
39 Modes|=CharMode(sPW.charCodeAt(i));  
40 }  
41  
42 return bitTotal(Modes);  
43  
44 }  
45  
46 //pwStrength函数  
47 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色  
48  
49 function pwStrength(pwd){  
50 O_color="#eeeeee";  
51 L_color="#FF0000";  
52 M_color="#FF9900";  
53 H_color="#33CC00";  
54 if (pwd==null||pwd==''){  
55 Lcolor=Mcolor=Hcolor=O_color;  
56 }  
57 else{  
58 S_level=checkStrong(pwd);  
59 switch(S_level) {  
60 case 0:  
61 Lcolor=Mcolor=Hcolor=O_color;  
62 case 1:  
63 Lcolor=L_color;  
64 Mcolor=Hcolor=O_color;  
65 break;  
66 case 2:  
67 Lcolor=Mcolor=M_color;  
68 Hcolor=O_color;  
69 break;  
70 default:  
71 Lcolor=Mcolor=Hcolor=H_color;  
72 }  
73 }  
74  
75 document.getElementById("strength_L").style.background=Lcolor;  
76 document.getElementById("strength_M").style.background=Mcolor;  
77 document.getElementById("strength_H").style.background=Hcolor;  
78 return;  
79 }   
80 </script>
81 </head>
82 <body>
83 <div>
84 <form name="form1" action="" >  
85 输入密码:<input type="password" size="15" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)">  
86 <br/>密码强度:  
87 <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display:inline'>  
88 <tr align="center" bgcolor="#eeeeee">  
89  
90 <td width="33%" id="strength_L">弱</td>  
91 <td width="33%" id="strength_M">中</td>  
92 <td width="33%" id="strength_H">强</td>  
93 </tr>  
94 </table>  
95  
96 </form>
97 </div>
98 </body>
99 </html>

 

posted @ 2016-06-02 16:22  魔流剑  阅读(546)  评论(0)    收藏  举报