用Javascript评估用户输入密码的强度（Knockout版）

我们来看看如果使用Knockout更简单的来实现密码强度的验证。
原有代码请查看：

首先我们来改善一下上面博友的验证函数为如下代码：

 
var Page = Page || {}; 
Page.Utility = Page.Utility || {}; 
Page.Utility.Registration = Page.Utility.Registration || {}; 
//获取密码强度 
Page.Utility.Registration.getPasswordLevel = function (password) { 
if (password == null || password == '') 
return 0; 
if (password.length <= 4) 
return 0; //密码太短 
var Modes = 0; 
for (i = 0; i < password.length; i++) { 
Modes |= CharMode(password.charCodeAt(i)); 
} 
return bitTotal(Modes); 
//CharMode函数 
function CharMode(iN) { 
if (iN >= 48 && iN <= 57) //数字 
return 1; 
if (iN >= 65 && iN <= 90) //大写字母 
return 2; 
if (iN >= 97 && iN <= 122) //小写 
return 4; 
else 
return 8; //特殊字符 
} 
//bitTotal函数 
function bitTotal(num) { 
modes = 0; 
for (i = 0; i < 4; i++) { 
if (num & 1) modes++; 
num >>>= 1; 
} 
return modes; 
} 
}; 

然后来创建View Model，但是引用Knockout之前，我们首先要引用Knockout的Js类库（具体介绍请查看Knockout应用开发指南的系列教程）
代码如下：

复制代码代码如下:

 
var viewModel = { 
Password: ko.observable(""), 
Ocolor: "#eeeeee" 
}; 
对于密码强度以及颜色的值依赖于密码字符串的值，所以我们需要为他们声明依赖属性，代码如下： 
viewModel.PasswordLevel = ko.dependentObservable(function () { 
return Page.Utility.Registration.getPasswordLevel(this.Password()); 
}, viewModel); 
viewModel.Lcolor = ko.dependentObservable(function () { 
//根据密码强度判断第一个格显示的背景色 
return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")) 
}, viewModel); 
viewModel.Mcolor = ko.dependentObservable(function () { 
//根据密码强度判断第二个格显示的背景色 
return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00") 
}, viewModel); 
viewModel.Hcolor = ko.dependentObservable(function () { 
//根据密码强度判断第三个格显示的背景色 
return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00" 
}, viewModel); 
然后使用applyBindings方法将view model绑定到该页面，你可以使用jQuery的ready函数来执行该绑定代码，也可以在页面最下方执行绑定代码，我们这里使用了jQuery，代码如下： 
$((function () { 
ko.applyBindings(viewModel); 
})); 