首页
所有分类
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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
JQuery中clone方法复制节点
May 18 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
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
根德5570(1) YAESU(1) WR-800F(1) R9700(1) DE1105(1) SONY600GR(1) 239军机(1) DE1103(2) DE1107(3) 胆机(1)
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
JavaScript字符串对象replace方法实例（用于字符串替换或正则替换）
2014/10/16 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python分析学校四六级过关情况
2017/11/22 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python占位符输入方式实例
2019/05/27 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
北美大型运动类产品商城：Champs Sports
2017/01/12 全球购物
世界上最好的旅行夹克：BauBax
2018/12/23 全球购物
乌克兰品牌化妆品和香水在线商店：Bomond
2020/01/14 全球购物
eharmony澳大利亚：网上约会服务
2020/02/29 全球购物
语文高效课堂实施方案
2014/05/03 职场文书
村容村貌整治方案
2014/05/21 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
赢在中国观后感
2015/06/02 职场文书
小爸爸观后感
2015/06/15 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
java中如何截取字符串最后一位
2022/07/07 Java/Android