用Javascript评估用户输入密码的强度（Knockout版）
原文:用Javascript评估用户输入密码的强度（Knockout版）
早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）。
我们来看看如果使用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应用开发指南的系列教程）
View model代码如下：
- 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 评估用户输入密码的强度
什么是一个安全的密码呢? 1.如果密码少于5位,那么就认为这是一个弱密码. 2.如果密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码. 3.如果密码由数字.小写字母. ...
- JavaScript即时判断输入密码的强度
源码示例: 1.javascript代码 <script type="text/javascript"> //CharMode函数 //测试某个字符是属于哪一类. fu ...
- JavaScript 判断用户输入的邮箱及手机格式是否正确
JavaScript判断用户输入的邮箱格式是否正确.判断用户输入的手机号格式是否正确,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: /* * 功能:判断用户输入的邮箱格式是否正确 ...
- 使用JavaScript验证用户输入的是否为正整数
在项目开发中,需要使用JavaScript验证用户输入的是否为正整数. 方法一: var type="^[0-9]*[1-9][0-9]*$"; var r=new RegExp( ...
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- 《JavaScript面向对象编程指南（第2版）》读书笔记（一）
目录 一.对象 1.1 获取属性值的方式 1.2 获取动态生成的属性的值 二.数组 2.1 检测是否为数组 2.2 增加数组长度导致未赋值的位置为undefined 2.3 用闭包实现简易迭代器 三. ...
- 《JavaScript面向对象编程指南（第2版）》读书笔记（二）
<JavaScript面向对象编程指南(第2版)>读书笔记(一) <JavaScript面向对象编程指南(第2版)>读书笔记(二) 目录 一.基本类型 1.1 字符串 1.2 ...
- 重温《javascript高级程序设计》（第3版）
1.重温<JavaScript高级程序设计>(第3版) (一)重温<javascript高级程序设计>(第1-4章) (二)重温<JavaScript高级程序设计> ...
随机推荐
- C语言总结之---关键字
我记得我开始学习C语言的时候,那时候还在读高中,我们老师就把C语言的关键字,全部写在黑板上,老师说我们下面的两节课的内容就是(把它给记下来) 你还记得标准C有多少个关键字吗? 第一:关键字描述 C99 ...
- Nginx负载均衡：分布式/热备Web Server的搭建
Nginx是一款轻量级的Web server/反向代理server及电子邮件(IMAP/POP3)代理server.并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开 ...
- POJ 2762推断单个联通(支撑点甚至通缩+拓扑排序）
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14789 ...
- Swift - 使用socket进行通信（附聊天室样例）
在Swift开发中,如果我们需要保持客服端和服务器的长连接进行双向的数据通信,使用socket是一种很好的解决方案. 下面通过一个聊天室的样例来演示socket通信,这里我们使用了一个封装好的sock ...
- Metasploit学习之msf连接数据库
kali使用metasploit开启数据服务: 首先,初次使用系统要初始化建立数据库msf3, 否则的话 /opt/metasploit/apps/pro/ui/config/databse.yml不 ...
- iOS 使用UIBezierPath类实现随手画画板
在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...
- 自定义NavgationBa返回按钮
iOS 上UINavigationController视图压栈形式,可以在当前视图无限制push许多视图,然而一些会觉得自带的push按钮不够美观,而且当上的上一个页面title很长的时候,那个返回 ...
- Swift - 使用NSURL进行数据的提交和获取（POST与GET）
使用Swift进行iOS开发时,不可避免的要进行远程的数据获取和提交. 其数据请求的方式既可能是POST也可能是GET.同不管是POST还是GET又可以分为同步请求和异步请求. 下面通过四个例子来进行 ...
- 14.2.5.1 Role of the .frm File for InnoDB Tables InnoDB .frm文件的作用
14.2.5.1 Role of the .frm File for InnoDB Tables: 14.2.5.1 Role of the .frm File for InnoDB Tables I ...
- 14.2.5.5 Change Buffer
14.2.5.5 Change Buffer change buffer是一个指定的数据结构 用于caches 数据到secondary index pages 当影响的pages 不是在buffer ...