1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
5 <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
6 <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
7 </head>
8 <body>
9 <script type="text/javascript">
10 var Page = Page || {};
11 Page.Utility = Page.Utility || {};
12 Page.Utility.Registration = Page.Utility.Registration || {};
13
14 //获取密码强度
15 Page.Utility.Registration.getPasswordLevel =function (password) {
16 if (password ==null|| password =='')
17 return0;
18
19 if (password.length <=4)
20 return0; //密码太短
21
22 var Modes =0;
23 for (i =0; i < password.length; i++) {
24 Modes |= CharMode(password.charCodeAt(i));
25 }
26 return bitTotal(Modes);
27
28 //CharMode函数
29 function CharMode(iN) {
30 if (iN >=48&& iN <=57) //数字
31 return1;
32 if (iN >=65&& iN <=90) //大写字母
33 return2;
34 if (iN >=97&& iN <=122) //小写
35 return4;
36 else
37 return8; //特殊字符
38 }
39
40 //bitTotal函数
41 function bitTotal(num) {
42 modes =0;
43 for (i =0; i <4; i++) {
44 if (num &1) modes++;
45 num >>>=1;
46 }
47 return modes;
48 }
49 };
50
51 var viewModel = {
52 Password: ko.observable(""),
53 Ocolor: "#eeeeee"
54 };
55
56 viewModel.PasswordLevel = ko.dependentObservable(function () {
57 return Page.Utility.Registration.getPasswordLevel(this.Password());
58 }, viewModel);
59
60 viewModel.Lcolor = ko.dependentObservable(function () {
61 //根据密码强度判断第一个格显示的背景色
62 returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))
63 }, viewModel);
64
65 viewModel.Mcolor = ko.dependentObservable(function () {
66 //根据密码强度判断第二个格显示的背景色
67 returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")
68 }, viewModel);
69
70 viewModel.Hcolor = ko.dependentObservable(function () {
71 //根据密码强度判断第二个格显示的背景色
72 returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"
73 }, viewModel);
74
75 $((function () {
76 ko.applyBindings(viewModel);
77 }));
78
79
80 </script>
81 <form name="form1" action="">
82 输入密码:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
83 <br>
84 密码强度:
85 <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
86 height="23" style='display: inline'>
87 <tr align="center" bgcolor="#eeeeee">
88 <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">
89 弱
90 </td>
91 <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">
92 中
93 </td>
94 <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">
95 强
96 </td>
97 </tr>
98 </table>
99 </form>
100 </body>
101 </html>