<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>密码强度输入测试</title>
<style type="text/css">
.cont { margin-left:300px; margin-top:50px; border:solid 1px #ccc; width:520px; padding:20px;}
.passwd {margin-bottom: 10px;
}
table td p { display:block; border-top:solid 4px #ccc; text-align:center; margin-right:10px; line-height:22px;}
.red { border-top-color:#e00;}
.green { border-top-color:#3C3;}
.blue { border-top-color:#0CF;}
.passwd span {
font-size: 13px;
color: #888;}
.passwd span em { color:#f00; font-style:normal;}
</style>
</head><body>
<div class="cont">
<div class="passwd">密码：<input name="" type="password" id="passwd" /> <span><em>*</em>6-16位，由字母（区分大小写）、数字、符号组成</span>
</div>
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p>弱</p></td>
<td><p>中</p></td>
<td><p>强</p></td>
</tr>
</table>
</div><script type="text/javascript">
var reg = /[^A-z0-9]|[\^\[\]]/ ;
var s = reg.test("ds33");
console.log(s);
var pass = document.getElementById("passwd");
var zt = document.querySelectorAll("table tr p");
pass.addEventListener("focus",jiance);
pass.addEventListener("blur",shifang);function shifang (e){
ceshi(e);
pass.removeEventListener("keyup",ceshi);
}
function jiance (){pass.addEventListener("keyup",ceshi);
}
function ceshi (e){
var txt = e.target.value ;
if(txt.length>16){
e.target.value = txt.substr(0,16);
}
if(txt){
var qiangdu = AuthPasswd(txt);
switch (qiangdu){
case 0:
zt[0].className = "red";
zt[1].className = "";
zt[2].className = "";
break;
case 1:
zt[0].className = "red";
zt[1].className = "green";
zt[2].className = "";
break;
case 2:
zt[0].className = "red";
zt[1].className = "green";
zt[2].className = "blue";
break;
}
}
else {
zt[0].className = "";
zt[1].className = "";
zt[2].className = "";
}
}function AuthPasswd(string) {
if(string.length >=6) {
if(/[a-zA-Z]/.test(string) && /[0-9]/.test(string) && /[^A-z0-9]|[\^\[\]]/.test(string)) {
return 2 ;
}else if(/[a-zA-Z]/.test(string) || /[0-9]/.test(string) || /[^A-z0-9]|[\^\[\]]/.test(string)) {
if(/[a-zA-Z]+/.test(string) && /[0-9]/.test(string)) {
return 1 ;
}else if(/\[a-zA-Z]/.test(string) && /[^A-z0-9]|[\^\[\]]/.test(string)) {
return 1 ;
}else if(/[0-9]/.test(string) && /[^A-z0-9]|[\^\[\]]/.test(string)) {
return 1 ;
}else{
return 0 ;
}
}
}else{
return 0 ;
}
}
</script>
</body>
</html>
直接写一个代码吧，没什么技术含量。