`
senton
  • 浏览: 199062 次
  • 性别: Icon_minigender_1
  • 来自: 紫禁城
社区版块
存档分类
最新评论

使用Javascript评估用户输入密码的强度

    博客分类:
  • Web
阅读更多

密码已经是我们生活工作中必不 可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者,如果我们在网页中能对用户输入的密码进行安全评估,并显示出相应的 提示信息,那么对用户设置一个安全的密码将有很大帮助。同时也使得网站更具人性化,更有吸引力.

什么是一个安全的密码呢?本程序按以下的方式进行评估.

1.如果密码少于5位,那么就认为这是一个弱密码.

2.如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码.

3.如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则认为这是一个中度安全的密码.

4.如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则认为这是一个比较安全的密码.

本程序将根据用户输入的密码分别显示不同的颜色表示密码的强度,具体程序如下:

以下是引用片段:

<ccid_nobr> </ccid_nobr>
<ccid_code><script language=javascript>  



//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;
}

//checkStrong函数
//返回密码的强度级别

function checkStrong(sPW){
if (sPW.length<=4)
return 0; //密码太短
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) {
case 0:
Lcolor=Mcolor=Hcolor=O_color;
case 1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case 2:
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></ccid_code>
 
分享到:
评论

相关推荐

    用Javascript评估用户输入密码的强度

    用Javascript评估用户输入密码的强度

    使用 JavaScript 的密码强度背景

    在 JavaScript 中,我们可以实现密码强度检查器,以根据某些标准评估密码的健壮性。 为了确定密码的强度,我们通常会考虑长度、是否存在大写和小写字母、数字和特殊字符等因素。强密码通常将这些元素组合在一起以...

    用Javascript评估用户输入密码的强度实现代码

    用Javascript评估用户输入密码的强度实现代码,需要的朋友可以参考下。

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

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

    javascript技术大全

    用JavaScript实现仿Windows关机效果 js访问xml之遍历节点树 JS技术大全(防止复制,粘贴等) ...用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用JavaScript实现仿Windows关机效果

    javascrip上百技术总集

    下 用javascript操作asp.net label控件 外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript...

    input-supporter:AngularJS 上的输入支持者

    计算 0.0 到 1.0 范围内的密码强度。 该指令评估下一个方式。 从各个角度来看,越多越好。 密码长度 多种字符类型 &lt; input type =" password " password-strength =" passwordStrength " &gt; &lt; span&gt; password...

    PHP和MySQL Web开发第4版pdf以及源码

    11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3 选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 11.4 使用Prepared语句 11.5 使用...

    PHP和MySQL WEB开发(第4版)

    11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3 选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 11.4 使用Prepared语句 11.5 使用PHP与...

    PHP和MySQL Web开发第4版

    11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3 选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 11.4 使用Prepared语句 11.5 使用...

Global site tag (gtag.js) - Google Analytics