Heim >Web-Frontend >js-Tutorial >用Javascript评估用户输入密码的强度(Knockout版)_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:59:021264Durchsuche

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

复制代码 代码如下:









输入密码:


密码强度:
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;
}
};

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

最后,我们再看看这些值怎么动态绑定到HTML元素上的,请查看如下代码(其中使用了afterkeydown代替了onKeyUp和onBlur):
复制代码 代码如下:


输入密码:



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








然后就OK,运行代码查看,一模一样的功能展示出来了。
如果去掉为验证而改善的代码,总代码肯定是比原有的方式少的。
完整版代码如下:
复制代码 代码如下:











输入密码:


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















Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn