密码输入强度提示实例代码:
现在众多的网站的注册表单，在填写密码的时候能够实时的给出密码强度提示，这可以提醒用户当前输入的密码安全程度，算是非常人性化的一个举措，下面就通过一个实例简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>密码强度提示功能-蚂蚁部落</title>
<script type="text/javascript">
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;
}
}
function bitTotal(num)
{
modes=0;
for(i=0;i<4;i++)
{
if(num&1) modes++;
num>>>=1;
}
return modes;
}
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);
}
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;
}
window.onload=function()
{
var pw=document.getElementById("pw");
pw.onkeyup=function()
{
pwStrength(this.value)
}
pw.onBlur=function()
{
pwStrength(this.value)
}
}
</script>
</head>
<body>
<table width="250" cellpadding="2">
<tr>
<td width="40%" align="right">密码:</td>
<td colspan="3" align="left">
<input type="password" size="20" id="pw" />
</td>
</tr>
<tr align="center">
<td width="40%" align="right">密码强度:</td>
<td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td>
<td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td>
<td width="20%" id="strength_H" bgcolor="#f5f5f5">强</td>
</tr>
</table>
</body>
</html>
以上代码实现了我们的要求，当输入密码的时候，能够以颜色的形式实时提醒输入密码的强度，代码直接套用就可以了，有兴趣的朋友可以自行分析一下，如有任何问题，可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8922
更多内容可以参阅:http://www.softwhy.com/javascript/
时间： 2024-10-08 19:35:18