JavaScript即时判断输入密码的强度

 1    <script type="text/javascript">
 2         //CharMode函数 
 3         测试某个字符是属于哪一类. 
 4         function CharMode(iN) {
 5             if (iN >= 48 && iN <= 57) 数字 
 6                 return 1;
 7             if (iN >= 65 && iN <= 90) 大写字母 
 8                 return 2 9             if (iN >= 97 && iN <= 122) 小写 
10                 return 411             else
12                 return 8; 特殊字符 
13         }
14         bitTotal函数 
15         计算出当前密码当中一共有多少种模式 
16          bitTotal(num) {
17             modes = 018             for (i = 0; i < 4; i++) {
19                 if (num & 1) modes++20                 num >>>= 121             }
22             return modes;
23 24         checkStrong函数 
25         返回密码的强度级别 
26 
27          checkStrong(sPW) {
28             if (sPW.length <= 4)
29                 return 0; 密码太短 
30             Modes = 031             for (i = 0; i < sPW.length; i++32                 测试每一个字符的类别并统计一共有多少种模式. 
33                 Modes |= CharMode(sPW.charCodeAt(i));
34 35              bitTotal(Modes);
36 37 
38         pwStrength函数 
39         当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 
40          pwStrength(pwd) {
41             O_color = "#e0f0ff"42             L_color = "#FF0000"43             M_color = "#FF9900"44             H_color = "#33CC00"45             if (pwd == null || pwd == ''46                 Lcolor = Mcolor = Hcolor = O_color;
47 48             else {
49                 S_level = checkStrong(pwd);
50                 switch (S_level) {
51                     case 0:
52                         Lcolor = Mcolor = Hcolor =53                     case 154                         Lcolor = L_color;
55                         Mcolor = Hcolor =56                         break57                     case 258                         Lcolor = Mcolor = M_color;
59                         Hcolor =60                         61                     default62                         Lcolor = Mcolor = Hcolor = H_color;
63                 }
64 65 
66             document.getElementById("strength_L").style.background = Lcolor;
67             document.getElementById("strength_M").style.background = Mcolor;
68             document.getElementById("strength_H").style.background = Hcolor;
69             70 71     </script>

 1 <table>
 2             <tr>
 3                 <td align="center" colspan=3">注册新帐户</td>
 4                 <td></td>
 5             </tr>
 6             <tr>
 7                 <td align=right">
 8                     <asp:Label ID=UserNameLabel" runat=server" AssociatedControlID=UserName">用户名:</asp:Label>
 9                 </td>
10                 <td>
11                     <asp:TextBox ID=" CausesValidation=True" ValidationGroup=group1"></asp:TextBox>
12                 </td>
13                 <td>
14                          <asp:Button ID=btnCheck" OnClick=btnCheck_Click" Text=检查该用户名是否有效" />
15                 </td>
16                 <td>
17                      <asp:RequiredFieldValidator ID=UserNameRequired" ControlToValidate=" ErrorMessage=用户名不能为空"></asp:RequiredFieldValidator>
18                 </td>
19             </tr>
20                           <tr>
21                     <td align=22                                昵称
23                     </td>
24                   <td align=left25                       <asp:TextBox ID=txtNickName26                   </td>
27                     <td colspan=2"></td>
28                 </tr>
29             <tr>
30                 <td align=31                     <asp:Label ID=lblPasswordPassword">密码:</asp:Label>
32                 </td>
33                 <td>
34                     <asp:TextBox ID=" TextMode=" onKeyUp=pwStrength(this.value)" onBlur=35                 </td>
36                 <td>
37                         <asp:RequiredFieldValidator ID=PasswordRequired必须填写“密码”。38                 </td>
39                 <td></td>
40             </tr>
41             <tr>
42                 <td id=strength_L" align=" >
43                     弱</td>
44                 <td id=strength_M45                     中</td>
46                 <td id=strength_H47                     强</td>
48                 <td></td>
49             </tr>
50             <tr>
51                 <td align=52                     <asp:Label ID=lblConfirmPasswordConfirmPassword">确认密码:</asp:Label>
53                 </td>
54                 <td>
55                     <asp:TextBox ID=56                 </td>
57                 <td>
58                     <asp:RequiredFieldValidator ID=ConfirmPasswordRequired必须填写“确认密码”" ></asp:RequiredFieldValidator>
59                 </td>
60                 <td>
61                     <asp:CompareValidator ID=PasswordCompare" ControlToCompare=" Display=Dynamic“密码”和“确认密码”必须匹配。" ></asp:CompareValidator>
62                 </td>
63             </tr>
64             <tr>
65                 <td align=66                     <asp:Label ID=lblMailEmail">电子邮箱:</asp:Label>
67                 </td>
68                 <td>
69                     <asp:TextBox ID=70                 </td>
71                 <td>
72                     <asp:RequiredFieldValidator ID=EmailRequired必须填写“电子邮箱”。73                 </td>
74                 <td>
75                     <asp:RegularExpressionValidator ID=RegularExpressionValidator1电子邮箱格式不正确" ValidationExpression=w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*"></asp:RegularExpressionValidator>
76                 </td>
77             </tr>
78               <tr>
79                     <td colspan=80                         <asp:Button ID=btnRegist注册btnRegist_Click81                     </td>
82                   <td colspan=83                       <input id=Reset1" type=reset" value=重置84                   </td>
85                 </tr>
86 
87         </table>