密码框验证
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#sf,#sc,#st{
padding-left:15px;
}
.first{
left:190px;
}
.second{
left:242px;
}
.third{
left:294px;
}
.help{
height:18px;
width:50px;
//background-color:#FF7400;
position:absolute;
top:0px;
}
#span{
font-size:14px;
}
#div{
position:relative;
}
</style>
</head>
<body>
Password:<input type="password" name="" id="pwd" maxlength="16"/><span id="s"></span>
<div id="div">
<span id="span">6~16个字符，区分大小写</span>
<div id="1"class="help first" style="background-color:#fff"><span id="sf"></span></div>
<div id="2" class="help second" style="background-color:#fff"><span id="sc"></span></div>
<div id="3" class="help third" style="background-color:#fff"><span id="st"></span></div>
</div>
<script type="text/javascript">
(function() {
var pwd = document.getElementById("pwd");
var span = document.getElementById("span");
function pwdStrength() {
var num = pwd.value;
var reg = /^[0-9]*$/g;
var reg1 = /^[a-z | A-Z]*$/g;
var reg2 = /^[\u0020-\u002F | \u003A-\u0040 | \\]*$/g;
var reg3 = /^[\d | a-z | A-Z]*$/g;
var reg4 = /^[\d | \u0020-\u002F | \u003A-\u0040 | \\]*$/;
var reg5 = /^[a-z | A-Z | \u0020-\u002F | \u003A-\u0040 | \\]*$/;
var reg6 = /^[\d | a-z | A-Z | \u0020-\u002F | \u003A-\u0040 | \\]*$/;
count = 0;
if(pwd.value.length >= 6) {
if(reg.test(num) || reg1.test(num) || reg2.test(num)) {
document.getElementById("1").style.backgroundColor = "#EA9195";
document.getElementById("2").style.backgroundColor = "";
document.getElementById("3").style.backgroundColor = "";
document.getElementById("st").innerHTML = "";
document.getElementById("sc").innerHTML = "";
document.getElementById("sf").innerHTML = "弱";
//span.innerHTML = "密码过于简单，请尝试“字母+数字”的组合";
//span.style.color = "red";
count = 1;
} else if(reg3.test(num) || reg4.test(num) || reg5.test(num)) {
document.getElementById("1").style.backgroundColor = "#F0DA39";
document.getElementById("2").style.backgroundColor = "#F0DA39";
document.getElementById("3").style.backgroundColor = "";
document.getElementById("st").innerHTML = "";
document.getElementById("sf").innerHTML = "";
document.getElementById("sc").innerHTML = "中等";
count = 2;
} else{
document.getElementById("1").style.backgroundColor = "#5BAC46";
document.getElementById("2").style.backgroundColor = "#5BAC46";
document.getElementById("3").style.backgroundColor = "#5BAC46";
document.getElementById("sf").innerHTML = "";
document.getElementById("sc").innerHTML = "";
document.getElementById("st").innerHTML = "强";
count = 3;
}
}
}
pwd.onkeyup = function(event) {
if(pwd.value.length >= 6) {
pwdStrength(event);
}
//if(event.keyCode == 8) {
if(pwd.value.length < 6) {
document.getElementById("1").style.backgroundColor = "";
document.getElementById("2").style.backgroundColor = "";
document.getElementById("3").style.backgroundColor = "";
document.getElementById("sf").innerHTML = "";
document.getElementById("sc").innerHTML = "";
document.getElementById("st").innerHTML = "";
}
//}
}
pwd.onblur = function() {
if(pwd.value.length < 6) {
span.innerHTML = "密码长度应为6~16个字符";
span.style.color = "red";
return;
}
//pwdStrength(count);
if(count == 1) {
span.innerHTML = "密码过于简单，请尝试“字母+数字”的组合";
document.getElementById("sf").innerHTML = "";
document.getElementById("sc").innerHTML = "";
document.getElementById("st").innerHTML = "";
document.getElementById("1").style.backgroundColor = "";
document.getElementById("2").style.backgroundColor = "";
document.getElementById("3").style.backgroundColor = "";
span.style.color = "red";
} else if (count == 2) {
span.innerHTML = "密码强度：中";
span.style.color = "#5BAC46";
} else if(count == 3) {
span.innerHTML = "密码强度：强";
span.style.color = "#5BAC46";
}
};
pwd.onfocus = function(count) {
//span.innerHTML = "";
span.innerHTML = "6~16个字符，区分大小写";
span.style.color = "";
if(pwd.value.length < 6) {
//span.innerHTML = "密码长度应为6~16个字符";
span.style.color = "";
return;
}
//pwdStrength();
}
})();
</script>
</body>
</html>
