ASP.NET结合JS实现密码强度的验证功能（转）
ASP.NET结合JS实现密码强度的验证功能
下面基于ASP.Net实现一般网站常用的功能，注册用户输入密码强度验证功能，主要使用JS来实现.
效果如下：
输入密码:
密码强度:
| 弱 | 中 | 强 |
下面是全部的源代码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>无标题页</title>
8 </head>
9 <mce:script language="javascript" type="text/JavaScript"><!--
10
11 //CharMode函数
12 //测试某个字符是属于哪一类.
13 function CharMode(iN){
14 if (iN>=48 && iN <=57) //数字
15 return 1;
16 if (iN>=65 && iN <=90) //大写字母
17 return 2;
18 if (iN>=97 && iN <=122) //小写
19 return 4;
20 else
21 return 8; //特殊字符
22 }
23 //bitTotal函数
24 //计算出当前密码当中一共有多少种模式
25 function bitTotal(num){
26 modes=0;
27 for (i=0;i<4;i ){
28 if (num & 1) modes ;
29 num>>>=1;
30 }
31 return modes;
32 }
33 //checkStrong函数
34 //返回密码的强度级别
35
36 function checkStrong(sPW){
37 if (sPW.length<=4)
38 return 0; //密码太短
39 Modes=0;
40 for (i=0;i<sPW.length;i ){
41 //测试每一个字符的类别并统计一共有多少种模式.
42 Modes|=CharMode(sPW.charCodeAt(i));
43 }
44 return bitTotal(Modes);
45 }
46
47 //pwStrength函数
48 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
49 function pwStrength(pwd){
50 O_color="#e0f0ff";
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 {
59 S_level=checkStrong(pwd);
60 switch(S_level)
61 {
62 case 0:
63 Lcolor=Mcolor=Hcolor=O_color;
64 case 1:
65 Lcolor=L_color;
66 Mcolor=Hcolor=O_color;
67 break;
68 case 2:
69 Lcolor=Mcolor=M_color;
70 Hcolor=O_color;
71 break;
72 default:
73 Lcolor=Mcolor=Hcolor=H_color;
74 }
75 }
76
77 document.getElementById("strength_L").style.background=Lcolor;
78 document.getElementById("strength_M").style.background=Mcolor;
79 document.getElementById("strength_H").style.background=Hcolor;
80 return;
81 }
82 // --></mce:script>
83 <body>
84 <form id="form1" runat="server">
85 <div>
86 输入密码:<asp:TextBox ID="TextBox1" runat="server" onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value) ></asp:TextBox><br />
87 密码强度:
88 <table border="1" cellpadding="1" borderColorDark="#fdfeff" borderColorLight="#99ccff" cellspacing="1" style="width: 200px; display: inline; background-color:#e0f0ff">
89 <tr>
90 <td id="strength_L" style="width: 100px; height: 19px;" align="center">
91 弱</td>
92 <td id="strength_M" style="width: 100px; height: 19px;" align="center">
93 中</td>
94 <td id="strength_H" style="width: 100px; height: 19px;" align="center">
95 强</td>
96 </tr>
97 </table>
98 </div>
99 </form>
100 </body>
101 </html>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>无标题页</title>
8 </head>
9 <mce:script language="javascript" type="text/JavaScript"><!--
10
11 //CharMode函数
12 //测试某个字符是属于哪一类.
13 function CharMode(iN){
14 if (iN>=48 && iN <=57) //数字
15 return 1;
16 if (iN>=65 && iN <=90) //大写字母
17 return 2;
18 if (iN>=97 && iN <=122) //小写
19 return 4;
20 else
21 return 8; //特殊字符
22 }
23 //bitTotal函数
24 //计算出当前密码当中一共有多少种模式
25 function bitTotal(num){
26 modes=0;
27 for (i=0;i<4;i ){
28 if (num & 1) modes ;
29 num>>>=1;
30 }
31 return modes;
32 }
33 //checkStrong函数
34 //返回密码的强度级别
35
36 function checkStrong(sPW){
37 if (sPW.length<=4)
38 return 0; //密码太短
39 Modes=0;
40 for (i=0;i<sPW.length;i ){
41 //测试每一个字符的类别并统计一共有多少种模式.
42 Modes|=CharMode(sPW.charCodeAt(i));
43 }
44 return bitTotal(Modes);
45 }
46
47 //pwStrength函数
48 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
49 function pwStrength(pwd){
50 O_color="#e0f0ff";
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 {
59 S_level=checkStrong(pwd);
60 switch(S_level)
61 {
62 case 0:
63 Lcolor=Mcolor=Hcolor=O_color;
64 case 1:
65 Lcolor=L_color;
66 Mcolor=Hcolor=O_color;
67 break;
68 case 2:
69 Lcolor=Mcolor=M_color;
70 Hcolor=O_color;
71 break;
72 default:
73 Lcolor=Mcolor=Hcolor=H_color;
74 }
75 }
76
77 document.getElementById("strength_L").style.background=Lcolor;
78 document.getElementById("strength_M").style.background=Mcolor;
79 document.getElementById("strength_H").style.background=Hcolor;
80 return;
81 }
82 // --></mce:script>
83 <body>
84 <form id="form1" runat="server">
85 <div>
86 输入密码:<asp:TextBox ID="TextBox1" runat="server" onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value) ></asp:TextBox><br />
87 密码强度:
88 <table border="1" cellpadding="1" borderColorDark="#fdfeff" borderColorLight="#99ccff" cellspacing="1" style="width: 200px; display: inline; background-color:#e0f0ff">
89 <tr>
90 <td id="strength_L" style="width: 100px; height: 19px;" align="center">
91 弱</td>
92 <td id="strength_M" style="width: 100px; height: 19px;" align="center">
93 中</td>
94 <td id="strength_H" style="width: 100px; height: 19px;" align="center">
95 强</td>
96 </tr>
97 </table>
98 </div>
99 </form>
100 </body>
101 </html>
浙公网安备 33010602011771号