首页
所有分类
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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
详解vue中使用微信jssdk
Apr 19 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
js实现简易计算器小功能
Nov 18 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
口号(179) 计划(88) 党团范文(807) 慰问信(53) 开幕词(63) 汇报材料(247) 导游词(322) 报告(147) 闭幕词(9) 工作总结(1972)
You might like
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
客户端静态页面玩分页
2006/06/26 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
js限制文本框的输入内容代码分享（3类）
2015/08/20 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
浅谈js原生拖放
2016/11/21 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python 深度学习中的4种激活函数
2020/09/18 Python
智能钱包：Ekster
2019/11/21 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
日化店促销方案
2014/03/26 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
公司开业致辞
2015/07/29 职场文书
导游词之吉林花园山
2019/10/17 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
配置nginx负载均衡
2022/05/06 Servers
SQL Server中使用表变量和临时表
2022/05/20 SQL Server