zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    HTML表格的简单使用1
    守卫路由使用
    CSS高度塌陷问题解决方案
    CSS导航条nav简单样式
    Linux学习
    TYpeScript接口的使用
    javaScript中自定义sort中的比较函数,用于比较字符串长度,数值大小
    給eclipse添加字体,设置字体
    tomcat自动URLDecode解码问题(+号变空格)
    时间管理
  • 原文地址:https://www.cnblogs.com/weihanli/p/3496594.html
Copyright © 2011-2022 走看看