js密码强度验证

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>


<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; 
            }
            break; 
            
            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; 
            break; 
        } 
    }
    
    document.getElementById("strength_L").style.background=Lcolor; 
    document.getElementById("strength_M").style.background=Mcolor; 
    document.getElementById("strength_H").style.background=Hcolor; 
    return; 
} 
</script> 


</head>

<body>

<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>
posted @ 2012-08-03 11:57  xust  阅读(152)  评论(0)    收藏  举报