码迷,mamicode.com
首页 > 其他好文 > 详细

密码显示强弱

时间:2017-09-22 11:45:14      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:cti   var   输入密码   style   事件   round   text   element   break   

1 分别将div 包裹三个小的div

<div id="mainPwdStatus" class="padding-none register-form-input-psw-poor">
<div class="s1" id="strength_L" style="width: 26px; height: 22px;">弱</div>
<div class="s2" id="strength_M" style="width: 26px; height: 22px;">中</div>
<div class="s3" id="strength_H" style="width: 26px; height: 22px;">强</div>
</div>

2 调整css布局和样式 (看自己的需求去调整)

.register-form-input-psw-poor {
border: solid 1px #C0C0C0;
float: right;
width: 78px;
height: 24px;
margin-top: -24px;
padding-top: 0px;
padding-left: 0px;
.s1 {
float: right;
margin-right: 50px;
margin-top: 0px;
text-align: center;
line-height: 25px;
}
.s2 {
float: right;
margin-top: -22px;
margin-right: 26px;
text-align: center;
line-height: 25px;
}
.s3 {
float: right;
margin-right: 0px;
margin-top: -22px;
text-align: center;
line-height: 25px;
}
}

3js 验证密码规则

 //密码强度
$("#newPassword").keyup(function () {
pwdSor(this.value);
});
//失去光标事件
$("#newPassword").blur(function () {
pwdSor(this.value);
})
function pwdSor(pwd) {
O_color = "#ffffff";
L_color = "#FF0000";
M_color = "#FF9900";
H_color = "#33CC00";
var level = 0, strength = "O";
var hasNum = 0;
var hasLower = 0;
var hasUper = 0;
var hasSymbol = 0;
if (pwd == null || pwd == ‘‘) {
strength = "O";
Lcolor = Mcolor = Hcolor = O_color;
} else {
var mode = 0;
if (pwd.length <= 5) {
mode = 0;
} else {
for (i = 0; i < pwd.length; i++) {
var charCode;
charCode = pwd.charCodeAt(i);
// 判断输入密码的类型
if (charCode >= 48 && charCode <= 57) //数字
hasNum = 1;
else if (charCode >= 65 && charCode <= 90) //大写
hasUper = 1;
else if (charCode >= 97 && charCode <= 122) //小写
hasLower = 1;
else
hasSymbol = 1;
}
if (hasSymbol == 1 && hasUper == 1 && hasNum == 1 && hasLower == 1) {
//强
level = 8;
} else if (hasUper + hasLower == 2 && hasNum == 1) {
level = 2;
} else if (hasUper + hasLower == 1 && hasLower + hasUper == 1 && hasNum == 1 && hasSymbol == 0 && pwd.length >= 6) {
level = 1;
} else {
level = 0;
}
}

}
switch (level) {
case 0:
strength = "O";
Lcolor = Mcolor = Hcolor = O_color;
break;
case 1:
strength = "L";
Lcolor = L_color;
Mcolor = Hcolor = O_color;
break;
case 2:
strength = "M";
Lcolor = Mcolor = M_color;
Hcolor = O_color;
break;
default:
strength = "H";
Lcolor = Mcolor = Hcolor = H_color;
break;
}
document.getElementById("strength_L").style.background = Lcolor;
document.getElementById("strength_M").style.background = Mcolor;
document.getElementById("strength_H").style.background = Hcolor;
return strength;
}
做的很lower,还是在别人指点下。上效果图

技术分享

技术分享

技术分享

密码规则可以自己定义。
希望大家工作愉快!

密码显示强弱

标签:cti   var   输入密码   style   事件   round   text   element   break   

原文地址:http://www.cnblogs.com/yfx--/p/7573398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!