服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

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

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

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

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

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

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

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

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

以下是引用片段:

<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>

扫描关注微信公众号