首页
所有分类
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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
node.js中 mysql 增删改查操作及async，await处理实例分析
Feb 11 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 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
tokenizer(1) 2022年7月新番(1) OVERLORD(1) 后端(1) 时钟(1) 算法(1) Vscode(3) SSH(3) 双人对弈(1) 人人对战(1)
You might like
php网站地图生成类示例
2014/01/13 PHP
php简单图像创建入门实例
2015/06/10 PHP
php实现求相对时间函数
2015/06/15 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Ray-Ban雷朋瑞典官方网站：全球领先的太阳眼镜品牌
2019/08/22 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
班组建设经验交流材料
2014/05/12 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python