jQuery密码强度验证控件使用详解
本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<scripttype="text/javascript"src="jquery-1.12.1.js"></script>
<styletype="text/css">
.mainPrompt{
border:#999solid1px;
border-radius:13px;
overflow:hidden;
padding:1px2px;
display:inline-block;
height:20px;
}
.listPrompt{
float:left;
height:20px;
width:56px;
margin-right:2px;
background-color:#eeeeee;
}
.bot_textspan{
width:52px;
text-align:center;
display:inline-block;
line-height:18px;
}
</style>
</head>
<body>
<br/>
<div>
<pid="PromptMessage"style="margin-left:200px;">
新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p>
<inputtype="text"id="txtPassword"style="float:left;"/placeholder="请输入密码">
<divstyle="margin-left:30px;font-size:12px;float:left;">
<divclass="mainPrompt"align="center"bgcolor="#f5f5f5">
<divclass="listPrompt"id="strength_L"style="border-radius:8px0px0px8px;">
</div>
<divclass="listPrompt"id="strength_M">
</div>
<divclass="listPrompt"id="strength_H"style="margin-right:0px;border-radius:08px8px0;">
</div>
</div>
<divclass="bot_text">
<spanid="lowStrength">低</span><spanid="midStrength">
中</span><spanid="highStrength">高</span>
</div>
</div>
<div>
<scripttype="text/javascript">
functionJudgyPwdLevel(pwdStr){
varhasNumber=0;
varhasLetter=0;
varhasSymbol=0
if(pwdStr.length>=6){
for(vari=0;i<pwdStr.length;i++){
varitem=pwdStr[i];
if(item>='0'&&item<='9'){hasNumber=1;}
elseif((item>='a'&&item<="z")||(item>='A'&&item<"Z")){hasLetter=1;}
else{hasSymbol=1;}
}
}
returnhasLetter+hasNumber+hasSymbol;
}
//显示颜色
functionpwStrength(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=JudgyPwdLevel(pwd);
switch(S_level){
case0:
Lcolor=Mcolor=Hcolor=O_color;
case1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case2:
Lcolor=L_color;
Mcolor=M_color;
Hcolor=O_color;
break;
default:
Lcolor=L_color;
Mcolor=M_color;
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;
}
$("#txtPassword").keyup(function(e){
pwStrength($(e.target).val());
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。