用Javascript评估用户输入密码的强度(Knockout版)

简介: 原文:用Javascript评估用户输入密码的强度(Knockout版)早上看到博友6点多发的一篇关于密码强度的文章(连接),甚是感动(周末大早上还来发文)。 我们来看看如果使用Knockout更简单的来实现密码强度的验证。
原文: 用Javascript评估用户输入密码的强度(Knockout版)

早上看到博友6点多发的一篇关于密码强度的文章(连接),甚是感动(周末大早上还来发文)。

我们来看看如果使用Knockout更简单的来实现密码强度的验证。

原有代码请查看:

View Code
<!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,运行代码查看,一模一样的功能展示出来了。

如果去掉为验证而改善的代码,总代码肯定是比原有的方式少的。

 

完整版代码如下:

View Code
<!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>
目录
相关文章
|
7月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
123 2
vue.js项目评估流程图特效
|
7月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
185 4
|
7月前
|
JavaScript 数据安全/隐私保护
JS正则验证密码
JS正则验证密码
73 0
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
83 0
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
163 1
前端JS正则校验密码之3种实现方式
|
4月前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
7月前
|
移动开发 JavaScript 安全
js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结
js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结
344 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的狱内罪犯危险性评估系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的狱内罪犯危险性评估系统附带文章源码部署视频讲解等
30 0
|
6月前
|
算法 JavaScript 安全
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
61 0