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

输入密码:


密码强度:
height="23" style='display: inline'>

弱

中

强

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 return 0; //密码太短
var Modes = 0;
for (i = 0; i Modes |= CharMode(password.charCodeAt(i));
}
return bitTotal(Modes);
//CharMode函数
function CharMode(iN) {
if (iN >= 48 && iN return 1;
if (iN >= 65 && iN return 2;
if (iN >= 97 && iN return 4;
else
return 8; //特殊字符
}
//bitTotal函数
function bitTotal(num) {
modes = 0;
for (i = 0; i if (num & 1) modes++;
num >>>= 1;
}
return modes;
}
};

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() }, viewModel);
viewModel.Hcolor = ko.dependentObservable(function () {
//根据密码强度判断第三个格显示的背景色
return this.PasswordLevel() }, viewModel);
然后使用applyBindings方法将view model绑定到该页面，你可以使用jQuery的ready函数来执行该绑定代码，也可以在页面最下方执行绑定代码，我们这里使用了jQuery，代码如下：
$((function () {
ko.applyBindings(viewModel);
}));

输入密码:



密码强度:
height="23" style='display: inline'>

弱

中

强

输入密码:


密码强度:
height="23" style='display: inline'>

弱

中

强