复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<título>
密码强度检测
</título>
<tipo de estilo="texto/css">
cuerpo{fuente:12px/1.5 Arial;} entrada{float:left;font-size:12px;width:150px;font-family:arial;border:1px
sólido #ccc;padding:3px;} input.correct{border:1px verde sólido;} input.error{border:1px
rojo sólido;} #tips{float:left;margin:2px 0 0 20px;} #tips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin -derecha:2px;altura de línea:20px;alineación de texto:centro;}
#tips.s1 .active{fondo:#f30;} #tips.s2 .active{fondo:#fc0;} #tips.s3
.active{fondo:#cc0;} #tips.s4 .activo{fondo:#090;}
</estilo>
<tipo de script="texto/javascript">
ventana.onload = función() {
var oTips = document.getElementById("consejos");
var oInput = document.getElementsByTagName("entrada")[0];
var aSpan = oTips.getElementsByTagName("span");
var aStr = ["弱", "中", "强", "非常好"];
var i = 0;
oInput.onkeyup = oInput.onfocus = oInput.onblur = función() {
var índice = checkStrong(este.valor);
this.className = índice? "correcto": "error";
oTips.className = "s" + índice;
for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
índice && (aSpan[índice - 1].className = "activo", aSpan[índice - 1].innerHTML = aStr[índice - 1])
}
};
/** 强度规则
+ ------------------------------------------------- ------ +
1) 任何少于6个字符的组合,弱;任何字符数的同类字符组合,弱;
2) 任何字符数的两类字符组合,中;
3) 12位字符数以下的三类或四类字符组合,强;
4) 12位字符数以上的三类或四类字符组合,非常好.
+ ------------------------------------------------- ------ +
**/
//检测密码强度
función checkStrong(sValue) {
modos var = 0;
if (sValue.length <6) modos de retorno;
if (//d/.test(sValue)) modos++; //数字
if (/[az]/.test(sValue)) modos++; //小写
if (/[AZ]/.test(sValue)) modos++; //大写
if (//W/.test(sValue)) modos++; //特殊字符
cambiar (modos) {
caso 1:
devolver 1;
romper;
caso 2:
devolver 2;
caso 3:
caso 4:
devolver sValue.length <12? 3: 4
romper;
}
}
</script>
</cabeza>
<cuerpo>
<tipo de entrada="contraseña" valor="" maxlength="16" />
<div id="consejos">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</cuerpo>
</html>