Loading

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

源码示例：

1.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 4;
11             else
12                 return 8; //特殊字符 
13         }
14         //bitTotal函数 
15         //计算出当前密码当中一共有多少种模式 
16         function bitTotal(num) {
17             modes = 0;
18             for (i = 0; i < 4; i++) {
19                 if (num & 1) modes++;
20                 num >>>= 1;
21             }
22             return modes;
23         }
24         //checkStrong函数 
25         //返回密码的强度级别 
26 
27         function checkStrong(sPW) {
28             if (sPW.length <= 4)
29                 return 0; //密码太短 
30             Modes = 0;
31             for (i = 0; i < sPW.length; i++) {
32                 //测试每一个字符的类别并统计一共有多少种模式. 
33                 Modes |= CharMode(sPW.charCodeAt(i));
34             }
35             return bitTotal(Modes);
36         }
37 
38         //pwStrength函数 
39         //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 
40         function 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 = O_color;
53                     case 1:
54                         Lcolor = L_color;
55                         Mcolor = Hcolor = O_color;
56                         break;
57                     case 2:
58                         Lcolor = Mcolor = M_color;
59                         Hcolor = O_color;
60                         break;
61                     default:
62                         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             return;
70         }
71     </script>

　　2.页面代码

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

 

posted @ 2013-12-29 17:58  WeihanLi  阅读(818)  评论(0)  编辑  收藏  举报