首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 30, 2011

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<script type="text/javascript"> 
//CharMode函数 
function CharMode(iN) { 
if (iN >=48&& iN <=57) //数字 
return1; 
if (iN >=65&& iN <=90) //大写字母 
return2; 
if (iN >=97&& iN <=122) //小写 
return4; 
else 
return8; //特殊字符 
} 
//bitTotal函数 
function bitTotal(num) { 
modes =0; 
for (i =0; i <4; i++) { 
if (num &1) modes++; 
num >>>=1; 
} 
return modes; 
} 
//checkStrong函数 
function checkStrong(sPW) { 
if (sPW.length <=4) 
return0; //密码太短 
Modes =0; 
for (i =0; i < sPW.length; i++) { 
Modes |= CharMode(sPW.charCodeAt(i)); 
} 
return bitTotal(Modes); 
} 
//pwStrength函数 
function pwStrength(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> 
<form name="form1" action=""> 
输入密码:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> 
<br> 
密码强度: 
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" 
height="23" style='display: inline'> 
<tr align="center" bgcolor="#eeeeee"> 
<td width="33%" id="strength_L"> 
弱 
</td> 
<td width="33%" id="strength_M"> 
中 
</td> 
<td width="33%" id="strength_H"> 
强 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

首先我们来改善一下上面博友的验证函数为如下代码： 
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); 
}));

最后，我们再看看这些值怎么动态绑定到HTML元素上的，请查看如下代码（其中使用了afterkeydown代替了onKeyUp和onBlur）： 
<form name="form1" action=""> 
输入密码: 
<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> 
<br> 
密码强度: 
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" 
height="23" style='display: inline'> 
<tr align="center" bgcolor="#eeeeee"> 
<td width="50"data-bind="style: { backgroundColor: Lcolor }">弱</td> 
<td width="50"data-bind="style: { backgroundColor: Mcolor }">中</td> 
<td width="50"data-bind="style: { backgroundColor: Hcolor }">强</td> 
</tr> 
</table> 
</form>

然后就OK，运行代码查看，一模一样的功能展示出来了。
如果去掉为验证而改善的代码，总代码肯定是比原有的方式少的。
完整版代码如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script> 
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
var Page = Page || {}; 
Page.Utility = Page.Utility || {}; 
Page.Utility.Registration = Page.Utility.Registration || {}; 
//获取密码强度 
Page.Utility.Registration.getPasswordLevel =function (password) { 
if (password ==null|| password =='') 
return0; 
if (password.length <=4) 
return0; //密码太短 
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) //数字 
return1; 
if (iN >=65&& iN <=90) //大写字母 
return2; 
if (iN >=97&& iN <=122) //小写 
return4; 
else 
return8; //特殊字符 
} 
//bitTotal函数 
function bitTotal(num) { 
modes =0; 
for (i =0; i <4; 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 () { 
//根据密码强度判断第一个格显示的背景色 
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> 
<form name="form1" action=""> 
输入密码:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> 
<br> 
密码强度: 
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" 
height="23" style='display: inline'> 
<tr align="center" bgcolor="#eeeeee"> 
<td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }"> 
弱 
</td> 
<td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }"> 
中 
</td> 
<td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }"> 
强 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
简单的js分页脚本
May 21 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
Ubuntu 11.10 安装Node.js的方法
Nov 30 #Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 #Javascript
js常用代码段整理
Nov 30 #Javascript
firebug的一个有趣现象介绍
Nov 30 #Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 #Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 #Javascript
chrome原生方法之数组
Nov 30 #Javascript
pdf(1) JDBC(3) Eclipse(1) 太阳码(1) 二维码(2) 日志(1) openGauss(1) Word(2) 延时任务(1) 条码(1)
You might like
php自动加载的两种实现方法
2010/06/21 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
php redis实现文章发布系统（用户投票系统）
2017/03/04 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
jQuery滑动效果实现方法分析
2018/09/05 jQuery
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python处理中文标点符号大集合
2018/05/14 Python
python处理csv中的空值方法
2018/06/22 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Madewell美德威尔美国官网：美国休闲服饰品牌
2016/11/25 全球购物
租租车：国际租车、美国租车、欧洲租车、特价预订国外租车（中文服务）
2018/03/28 全球购物
The Beach People美国：澳洲海滨奢华品牌
2018/07/05 全球购物
美国和加拿大计算机和电子产品购物网站：TigerDirect.com
2019/09/13 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
铁路个人事迹材料
2014/01/30 职场文书
捐助倡议书范文
2014/04/15 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2014年减负工作总结
2014/12/10 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技