<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邮箱密码验证</title>
<style media="screen">
*{
margin: 0px;
padding: 0px;
}
#wrap {
width: 255px;
height: 17px;
display: none;
position: absolute;
top: 60px;
left: 180px;
}
#wrap>p {
width: 60px;
height: 15px;
line-height: 15px;
text-align: center;
display: inline-block;
font-size: 0.8em;
}
form {
margin: 20px;
}
span {
font-size: 0.8em;
}
#warning {
position: absolute;
top: 62px;
left: 50px;
}
#falseAlarm {
position: absolute;
top: 62px;
left: 50px;
display:none;
color:red;
}
</style>
</head>
<body>
<form class="" action="index.html" method="post">
<span style="color:red">*</span><span>密码</span>
<input id="passWord" style="width: 300px;height:30px;border:1px solid lightgrey;"type="password" name="name" value="">
</form>
<span id="warning">6~16个字符，区分大小写</span>
<span id="falseAlarm">密码长度应为6~16个字符</span>
<div id="wrap">
<p id="weak">弱</p>
<p id="medium">中等</p>
<p id="strong">强</p>
</div>
</body>
<script type="text/javascript">
/*
定义密码的规则
1、密码长度位6～16位有效字符
2、如果密码是纯数字、纯字母大写或者小写，则密码强大为弱
3、密码中包含数字和字母的组合，则密码强度为中等
4、密码中包含字母、大小写字母。下划线的组合密码强度为强
*/
var passWord = document.getElementById("passWord");
var wrap = document.getElementById(‘wrap‘);
var weak = document.getElementById(‘weak‘);
var medium = document.getElementById(‘medium‘);
var strong = document.getElementById(‘strong‘);
var warning = document.getElementById(‘warning‘);
var falseAlarm = document.getElementById(‘falseAlarm‘);
//添加键盘监听事件
function addKeyEvent(event){
event = event | window.event;
var passcord = passWord.value;
//密码强度为弱正则表达式
var low = /(^\d{6,16}$)|(^[a-z]{6,16}$)|(^[A-Z]{6,16}$)|(^_{6,16}$)/g;
//密码强度为中等正则表达式
var middle = /(^[a-zA-Z]{6,16}$)|(^[a-z\d]{6,16}$)|(^[A-Z\d]{6,16}$)|(^[A-Z_]{6,16}$)|(^[_\d]{6,16}$)|(^[a-z_]{6,16}$)|(^[A-Z\d]{6,16}$)/g;
//密码强度为强正则表达式
var high = /(^[a-zA-Z\d]{6,16}$)|(^[a-zA-Z_]{6,16}$)|(^[a-z\d_]{6,16}$)(^[A-Z\d_]{6,16}$)|(^[a-zA-Z\d_]{6,16}$)/g;
if (low.test(passcord)) { //low.test(passcord) 如果满足low正则表达式，则返回true
wrap.style.display = "block";
weak.style.color = "white";
medium.style.color = "grey";
strong.style.color = "grey";
weak.style.background = "rgb(240,146,148)";
medium.style.background = "rgb(228,228,228)";
strong.style.background = "rgb(228,228,228)";
} else if (middle.test(passcord)) { //如果满足middle正则表达式，则返回true
wrap.style.display = "block";
weak.style.color = "rgb(243,218,80)";
medium.style.color = "white";
strong.style.color = "grey";
weak.style.background = "rgb(243,218,80)";
medium.style.background = "rgb(243,218,80)";
strong.style.background = "rgb(228,228,228)";
} else if(high.test(passcord)){ //如果满足high正则表达式，则返回true
wrap.style.display = "block";
weak.style.color = "rgb(76,173,79)";
medium.style.color = "rgb(76,173,79)";
strong.style.color = "white";
weak.style.background = "rgb(76,173,79)";
medium.style.background = "rgb(76,173,79)";
strong.style.background = "rgb(76,173,79)";
} else {
wrap.style.display = "none"; //如果不满足正则方程则不会显示密码强度
}
//假如输入密码位数超过16位，则会显示密码长度应为6~16个字符
if (passcord.length >= 16) {
warning.style.display = "none";
falseAlarm.style.display = "block";
} else {
//假如输入密码位数没超过16位，则会显示：6~16个字符，区分大小写
warning.style.display = "block";
falseAlarm.style.display = "none";
}
}
passWord.addEventListener(‘keyup‘,addKeyEvent,false);
</script>
</html>
效果如图所示：
