JavaScript中怎么评估用户输入密码的强度
这篇文章给大家介绍JavaScript中怎么评估用户输入密码的强度,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
10年积累的成都做网站、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站策划后付款的网站建设流程,更有龙泉免费网站建设让你可以放心的选择与我们合作。
原有代码请查看:
首先我们来改善一下上面博友的验证函数为如下代码:
var PagePage = Page || {}; PagePage.Utility = Page.Utility || {}; PagePage.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应用开发指南的系列教程)
View model代码如下:
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); }));
***,我们再看看这些值怎么动态绑定到HTML元素上的,请查看如下代码(其中使用了afterkeydown代替了onKeyUp和onBlur):
然后就OK,运行代码查看,一模一样的功能展示出来了。
如果去掉为验证而改善的代码,总代码肯定是比原有的方式少的。
完整版代码如下:
关于JavaScript中怎么评估用户输入密码的强度就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站名称:JavaScript中怎么评估用户输入密码的强度
网页链接:http://pwwzsj.com/article/gddigc.html