复制代码代码如下:
<!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">
<头>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<标题>
密码强度检测
</标题>
<样式类型=“文本/css”>
正文{字体:12px/1.5 Arial;}输入{浮动:左;字体大小:12px;宽度:150px;字体系列:arial;边框:1px
实心#ccc;填充:3px;}输入.正确{边框:1px实心绿色;}输入.错误{边框:1px
纯红色;} #tips{float:left;margin:2px 0 0 20px;} #tips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin -右:2px;行高:20px;文本对齐:居中;}
#tips.s1 .active{背景:#f30;} #tips.s2 .active{背景:#fc0;} #tips.s3
.active{背景:#cc0;} #tips.s4 .active{背景:#090;}
</风格>
<脚本类型=“文本/javascript”>
窗口.onload = 函数() {
var oTips = document.getElementById("提示");
var oInput = document.getElementsByTagName("输入")[0];
var aSpan = oTips.getElementsByTagName("span");
var aStr = ["弱", "中", "强", "非常好"];
变量我 = 0;
oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
var index = checkStrong(this.value);
this.className = 索引 ? “正确”:“错误”;
oTips.className = "s" + 索引;
for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
索引 && (aSpan[索引 - 1].className = "活动", aSpan[索引 - 1].innerHTML = aStr[索引 - 1])
}
};
/** 强度规则
+ ------------------------------------------------- ------ +
1) 任何缺少6个字符的组合,弱;任何字符数的同类字符组合,弱;
2) 任意字符数的两类字符组合,中;
3) 12位字符数以下的三类或四类字符组合,强;
4) 12位字符数以上的三类或四类字符组合,非常好。
+ ------------------------------------------------- ------ +
**/
//检测密码强度
函数 checkStrong(sValue) {
变量模式 = 0;
if (sValue.length < 6) 返回模式;
if (//d/.test(sValue)) 模式++; //数字
if (/[az]/.test(sValue)) 模式++; //小写
if (/[AZ]/.test(sValue)) 模式++; //大写
if (//W/.test(sValue)) 模式++; //特殊字符
切换(模式){
案例1:
返回1;
休息;
案例2:
返回2;
案例3:
案例4:
返回 sValue.length < 12 ? 3:4
休息;
}
}
</脚本>
</头>
<正文>
<输入类型=“密码”值=“”最大长度=“16”/>
<div id="提示">
<跨度></跨度>
<跨度></跨度>
<跨度></跨度>
<跨度></跨度>
</div>
</正文>
</html>