使用javascript对密码进行有密码强度提示的验证

使⽤javascript对密码进⾏有密码强度提⽰的验证
好些⽹站的注册功能中，都有对密码进⾏验证并且还有强度提⽰。

下⾯就来实现这种效果。

密码强度说明：
密码强度：弱——纯数字，纯字母，纯符号
密码强度：中——数字，字母，符号任意两种的组合
密码强度：强——数字，字母，符号全部都要有
实现思路：
在输⼊框提⽰区域编写两个div层，⼀个显⽰提⽰⽂字，⼀个显⽰密码强度提⽰。

给⽂本框添加onkeyup的验证事件：
1.没有输⼊时，显⽰“密码可由字母、数字、特殊符号组成，长度为6-18个字符”；
2.光标聚焦到⽂本框中，在密码长度没有6位之前，显⽰“密码不少于6位”提⽰⽂字；
3.当⽂本框中的字符达到6位后，显⽰提⽰⽂字的层隐藏，显⽰密码强度的层显⽰出来；
4.通过正则表达式控制密码强度提⽰的三个span的显隐，对上⾯三种情况，只需要对第⼀种，第三种进⾏验证即可，相对来说，这两个表达式⽐较好些⼀点。

这两种验证后也都
剩下任意两种组合，⽆需再编写表达式对第⼆种验证。

关键代码如下:
JS代码:
var reg1 = /(^\d{6,}$)|(^[a-zA-Z]{6,}$)|(^[^a-zA-Z0-9]{6,}$)/; //数字，字母或符号其中的⼀种
var reg7 = /\d*\D*((\d+[a-zA-Z]+[^0-9a-zA-Z]+)|(\d+[^0-9a-zA-Z]+[a-zA-Z]+)|([a-zA-Z]+\d+[^0-9a-zA-Z]+)|([a-zA-Z]+[^0-9a-zA-Z]+\d+)|([^0-9a-zA-Z]+[a-zA-Z]+\d+)|([^0-9a-zA-Z]+\d+[a-zA-Z]+))\d*\D*/; //数字字母字符任意组合function check_pwd() {
var pwd = document.getElementByIdx_x_x_x_x_x("txtPwd").value;
if (pwd.length < 6) {
$("#pwdPrompt div:eq(1)").html("密码长度不能⼩于6位");
return false;
} else {
$("#pwdPrompt div:eq(1)").css("display", "none");
$("#pwdPrompt div:eq(0)").css("display", "block");
if (reg1.test(pwd)) {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "none");
$("#pwdLength span:eq(2)").css("display", "none");
return true;
}
else if (!reg7.test(pwd)) {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "block");
$("#pwdLength span:eq(2)").css("display", "none");
return true;
}
else {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "block");
$("#pwdLength span:eq(2)").css("display", "block");
return true;
}
return true;
}
}
Html代码：
<style type="text/css">
#pwdLength span {
display: none;
float: left;
height: 14px;
width: 51px;
font-size: 12px;
text-align: center;
line-height: 14px;
color: white;
border-right: 1px solid white;
}
</style>
<input id="txtPwd" onkeyup="return check_pwd()" type="password"/><br />
<div id="pwdPrompt">
<div id="pwdLength">
<span style=" background-color:#999;">弱</span>
<span style=" background-color:#666;">中</span>
<span style=" background-color:#333;">强</span>
</div>
<div style="width: 340px;">密码可由字母、数字、特殊符号组成，长度为6-18个字符</div>
</div>。