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

最新推荐文章于 2019-04-09 12:33:55 发布

qq_42537388

最新推荐文章于 2019-04-09 12:33:55 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/qq_42537388/article/details/80799857

版权

早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）。

我们来看看如果使用Knockout更简单的来实现密码强度的验证。

原有代码请查看：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<scripttype="text/javascript">
//CharMode函数
functionCharMode(iN){
if(iN>=48&&iN<=57)//数字
return1;
if(iN>=65&&iN<=90)//大写字母
return2;
if(iN>=97&&iN<=122)//小写
return4;
else
return8;//特殊字符
}
//bitTotal函数
functionbitTotal(num){
modes=0;
for(i=0;i<4;i++){
if(num&1)modes++;
num>>>=1;
}
returnmodes;
}
//checkStrong函数
functioncheckStrong(sPW){
if(sPW.length<=4)
return0;//密码太短
Modes=0;
for(i=0;i<sPW.length;i++){
Modes|=CharMode(sPW.charCodeAt(i));
}
returnbitTotal(Modes);
}
//pwStrength函数
functionpwStrength(pwd){
O_color="#eeeeee";
L_color="#FF0000";
M_color="#FF9900";
H_color="#33CC00";
if(pwd==null||pwd==''){
Lcolor=Mcolor=Hcolor=O_color;
}else{
S_level=checkStrong(pwd);
switch(S_level){
case0:
Lcolor=Mcolor=Hcolor=O_color;
case1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case2:
Lcolor=Mcolor=M_color;
Hcolor=O_color;
break;
default:
Lcolor=Mcolor=Hcolor=H_color;
}
document.getElementById("strength_L").style.background=Lcolor;
document.getElementById("strength_M").style.background=Mcolor;
document.getElementById("strength_H").style.background=Hcolor;
return;
}
}</script>
<formname="form1"action="">
输入密码:<inputtype="password"size="10"onkeyup="pwStrength(this.value)"onblur="pwStrength(this.value)">
<br>
密码强度:
<tablewidth="217"border="1"cellspacing="0"cellpadding="1"足球平台出租 class="attribute">bordercolor="#cccccc"
height="23"style='display:inline'>
<tralign="center"bgcolor="#eeeeee">
<tdwidth="33%"id="strength_L">
弱
</td>
<tdwidth="33%"id="strength_M">
中
</td>
<tdwidth="33%"id="strength_H">
强
</td>
</tr>
</table>
</form>
</body>
</html>

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

varPagePage=Page||{};
PagePage.Utility=Page.Utility||{};
PagePage.Utility.Registration=Page.Utility.Registration||{};
//获取密码强度
Page.Utility.Registration.getPasswordLevel=function(password){
if(password==null||password=='')
return0;
if(password.length<=4)
return0;//密码太短
varModes=0;
for(i=0;i<password.length;i++){
Modes|=CharMode(password.charCodeAt(i));
}
returnbitTotal(Modes);
//CharMode函数
functionCharMode(iN){
if(iN>=48&&iN<=57)//数字
return1;
if(iN>=65&&iN<=90)//大写字母
return2;
if(iN>=97&&iN<=122)//小写
return4;
else
return8;//特殊字符
}
//bitTotal函数
functionbitTotal(num){
modes=0;
for(i=0;i<4;i++){
if(num&1)modes++;
num>>>=1;
}
returnmodes;
}
};

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

varviewModel={
Password:ko.observable(""),
Ocolor:"#eeeeee"
};

对于密码强度以及颜色的值依赖于密码字符串的值，所以我们需要为他们声明依赖属性，代码如下：

viewModel.PasswordLevel=ko.dependentObservable(function(){
returnPage.Utility.Registration.getPasswordLevel(this.Password());
},viewModel);
viewModel.Lcolor=ko.dependentObservable(function(){
//根据密码强度判断第一个格显示的背景色
returnthis.PasswordLevel()==0 this.Ocolor:(this.PasswordLevel()==1?"#FF0000":(this.PasswordLevel()==2?"#FF9900":"#33CC00"))
},viewModel);
viewModel.Mcolor=ko.dependentObservable(function(){
//根据密码强度判断第二个格显示的背景色
returnthis.PasswordLevel()<2?this.Ocolor:(this.PasswordLevel()==2?"#FF9900":"#33CC00")
},viewModel);
viewModel.Hcolor=ko.dependentObservable(function(){
//根据密码强度判断第三个格显示的背景色
returnthis.PasswordLevel()<3?this.Ocolor:"#33CC00"
},viewModel);

然后使用applyBindings方法将view model绑定到该页面，你可以使用jQuery的ready函数来执行该绑定代码，也可以在页面最下方执行绑定代码，我们这里使用了jQuery，代码如下：

$((function(){
ko.applyBindings(viewModel);
}));

最后，我们再看看这些值怎么动态绑定到HTML元素上的，请查看如下代码（其中使用了afterkeydown代替了onKeyUp和onBlur）：

<formname=~~足球平台出租pan class="attribute-value">"form1"~~action="">
输入密码:
<inputtype="text"size="10"data-bind="value:Password,valueUpdate:'afterkeydown'">
<br>
密码强度:
<tablewidth="217"border="1"cellspacing="0"cellpadding="1"bordercolor="#cccccc"
height="23"style='display:inline'>
<tralign="center"bgcolor="#eeeeee">
<tdwidth="50"data-bind="style:{backgroundColor:Lcolor}">弱</td>
<tdwidth="50"data-bind="style:{backgroundColor:Mcolor}">中</td>
<tdwidth="50"data-bind="style:{backgroundColor:Hcolor}">强</td>
</tr>
</table>
</form>

然后就OK，运行代码查看，一模一样的功能展示出来了。

如果去掉为验证而改善的代码，总代码肯定是比原有的方式少的。

完整版代码如下：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<scripttype="text/javascript"src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<scripttype="text/javascript"src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
</head>
<body>
<scripttype="text/javascript">
varPagePage=Page||{};
PagePage.Utility=Page.Utility||{};
PagePage.Utility.Registration=Page.Utility.Registration||{};
//获取密码强度
Page.Utility.Registration.getPasswordLevel=function(password){
if(password==null||password=='')
return0;
if(password.length<=4)
return0;//密码太短
varModes=0;
for(i=0;i<password.length;i++){
Modes|=CharMode(password.charCodeAt(i));
}
returnbitTotal(Modes);
//CharMode函数
functionCharMode(iN){
if(iN>=48&&iN<=57)//数字
return1;
if(iN>=65&&iN<=90)//大写字母
return2;
if(iN>=97&&iN<=122)//小写
return4;
else
return8;//特殊字符
}
//bitTotal函数
functionbitTotal(num){
modes=0;
for(i=0;i<4;i++){
if(num&1)modes++;
num>>>=1;
}
returnmodes;
}
};
varviewModel={
Password:ko.observable(""),
Ocolor:"#eeeeee"
};
viewModel.PasswordLevel=ko.dependentObservable(function(){
returnPage.Utility.Registration.getPasswordLevel(this.Password());
},viewModel);
viewModel.Lcolor=ko.dependentObservable(function(){
//根据密码强度判断第一个格显示的背景色
returnthis.PasswordLevel()==0?this.Ocolor:(this.PasswordLevel()==1?"#FF0000":(this.PasswordLevel()==2?"#FF9900":"#33CC00"))
},viewModel);
viewModel.Mcolor=ko.dependentObservable(function(){
//根据密码强度判断第二个格显示的背景色
returnthis.PasswordLevel()<2?this.Ocolor:(this.PasswordLevel()==2?"#FF9900":"#33CC00")
},viewModel);
viewModel.Hcolor=ko.dependentObservable(function(){
//根据密码强度判断第二个格显示的背景色
returnthis.PasswordLevel()<3?this.Ocolor:"#33CC00"
},viewModel);
$((function(){
ko.applyBindings(viewModel);
}));
</script>
<formname="form1"action="">
输入密码:<inputtype="text"size="10"data-bind="value:Password,valueUpdate:'afterkeydown'">
<br>
密码强度:
<tablewidth="217"border="1"cellspacing="0"cellpadding="1"bordercolor="#cccccc"
height="23"style='display:inline'>
<tralign="center"bgcolor="#eeeeee">
<tdwidth="50"id="strength_L"data-bind="style:{backgroundColor:Lcolor}">
弱
</td>
<tdwidth="50"id="strength_M"data-bind="style:{backgroundColor:Mcolor}">
中
</td>
<tdwidth="50"id="strength_H"data-bind="style:{backgroundColor:Hcolor}">
强
</td>
</tr>
</table>
</form>
</body>
</html>

原文：http://www.cnblogs.com/TomXu/archive/2011/11/27/2264876.html

【系列文章】

您可能感兴趣的文章:

发布一个JavaScript工具类库jutil_0

qq_42537388

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript评估用户输入密码的强度（Knockout版）

早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）。我们来看看如果使用Knockout更简单的来实现密码强度的验证。原有代码请查看：&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
复制链接

扫一扫