首页
所有分类
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 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
基于webpack 实用配置方法总结
Sep 28 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue 封装 Adminlte3组件的实现
Mar 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
条形码(1) tree shaking(1) 分布式追踪(1) delete in(1) group by(1) HBuilder(1) Three.js(1) GPU(1) Express(1) kubernetes(1)
You might like
php数组去重的函数代码
2013/02/03 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
phpStudy 2016 使用教程详解（支持PHP7）
2017/10/18 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
学习ExtJS（一） 之基础前提
2009/10/07 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
python编程线性回归代码示例
2017/12/07 Python
python机器学习理论与实战（一）K近邻法
2021/01/28 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python tkinter实现连连看游戏
2020/11/16 Python
美国生鲜及杂货电商：FreshDirect
2018/01/29 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
《乡愁》教学反思
2014/02/18 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
出差报告范文
2014/11/06 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
小浪底导游词
2015/02/12 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL