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 id ="Head1" runat ="server" >
< title > 密码强度测试 </ title >
</ head >

< script language ="javascript" type ="text/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 = " #e0f0ff " ;
L_color = " #FF0000 " ;
M_color = " #FF9900 " ;
H_color = " #33CC00 " ;
if (pwd == null || pwd == '' ){
Lcolor = Mcolor = Hcolor = O_color;
}
else
{
S_level = checkStrong(pwd);
// alert(S_level);
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 >

< body >
< form id ="form1" >
< div >
输入密码: < input type ="text" id ="TextBox1" onkeyup ="pwStrength(this.value)" onblur ="pwStrength(this.value)" >< br />
密码强度:
< table border ="1" cellpadding ="1" bordercolordark ="#fdfeff" bordercolorlight ="#99ccff"
cellspacing ="1" style ="width: 200px; display: inline; background-color: #e0f0ff" >
< tr >
< td id ="strength_L" style ="width: 100px; height: 19px;" align ="center" >
弱
</ td >
< td id ="strength_M" style ="width: 100px; height: 19px;" align ="center" >
中
</ td >
< td id ="strength_H" style ="width: 100px; height: 19px;" align ="center" >
强
</ td >
</ tr >
</ table >
</ div >
</ form >
</ body >
</ html >

 

 

 

转载于:https://www.cnblogs.com/sallen/archive/2010/06/05/1752413.html