jQuery密码强度验证控件使用详解
程序员文章站
2023-12-13 19:15:22
本文实例为大家分享了jquery密码强度验证控件，供大家参考，具体内容如下
本文实例为大家分享了jquery密码强度验证控件，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.12.1.js"></script>
<style type="text/css">
.mainprompt {
border: #999 solid 1px;
border-radius: 13px;
overflow: hidden;
padding: 1px 2px;
display: inline-block;
height: 20px;
}
.listprompt {
float: left;
height: 20px;
width: 56px;
margin-right: 2px;
background-color: #eeeeee;
}
.bot_text span {
width: 52px;
text-align: center;
display: inline-block;
line-height: 18px;
}
</style>
</head>
<body>
<br/>
<div>
<p id="promptmessage" style="margin-left: 200px;">
新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p>
<input type="text" id="txtpassword" style="float: left;"/ placeholder="请输入密码">
<div style="margin-left: 30px;font-size: 12px;float: left;">
<div class="mainprompt" align="center" bgcolor="#f5f5f5">
<div class="listprompt" id="strength_l" style="border-radius: 8px 0px 0px 8px;">
</div>
<div class="listprompt" id="strength_m">
</div>
<div class="listprompt" id="strength_h" style="margin-right: 0px;border-radius: 0 8px 8px 0;">
</div>
</div>
<div class="bot_text">
<span id="lowstrength">低</span> <span id="midstrength">
中</span> <span id="highstrength">高</span>
</div>
</div>
<div>
<script type="text/javascript">
function judgypwdlevel(pwdstr) {
var hasnumber = 0;
var hasletter = 0;
var hassymbol = 0
if (pwdstr.length >= 6) {
for (var i = 0; i < pwdstr.length; i++) {
var item = pwdstr[i];
if (item >= '0' && item <= '9') { hasnumber = 1; }
else if ((item >= 'a' && item <= "z") || (item >= 'a' && item < "z")) { hasletter = 1; }
else { hassymbol = 1; }
}
}
return hasletter + hasnumber + hassymbol;
}
//显示颜色
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 = judgypwdlevel(pwd);
switch (s_level) {
case 0:
lcolor = mcolor = hcolor = o_color;
case 1:
lcolor = l_color;
mcolor = hcolor = o_color;
break;
case 2:
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。