页面代码：
复制代码 代码如下:
<table>
<tr><td><input type="text" id="txtPwd" /></td></tr>
<tr><td>
<table id="pwdLever">
<tr>
<td>弱</td>
<td>中</td>
<td>强</td>
</tr>
</table>
</td></tr>
</table>
样式：
复制代码 代码如下:
<style type="text/css">
#pwdLever td
{
background-color:Gray;
width:45px;
text-align:center;
}
</style>
js代码：
复制代码 代码如下:
<script type="text/javascript">
window.onload = function () {
var textInput = document.getElementById("txtPwd");
//给密码输入框 注册键放开事件
textInput.onkeyup = function () {
var pwdValue = this.value;
var num = pwdChange(pwdValue);
var tds = document.getElementById("pwdLever").getElementsByTagName("td");
//修改密码颜色
if (num == 0 || num == 1) {
tds[0].style.backgroundColor = "red";
tds[1].style.backgroundColor = "gray";
tds[2].style.backgroundColor = "gray";
}
else if (num == 2) {
tds[0].style.backgroundColor = "red";
tds[1].style.backgroundColor = "red";
tds[2].style.backgroundColor = "gray";
}
else if (num == 3) {
tds[0].style.backgroundColor = "red";
tds[1].style.backgroundColor = "red";
tds[2].style.backgroundColor = "red";
}
else {
tds[0].style.backgroundColor = "gray";
tds[1].style.backgroundColor = "gray";
tds[2].style.backgroundColor = "gray";
}
}
}
function pwdChange(v) {
var num = 0;
var reg = /\d/; //如果有数字
if (reg.test(v)) {
num++;
}
reg = /[a-zA-Z]/; //如果有字母
if (reg.test(v)) {
num++;
}
reg = /[^0-9a-zA-Z]/; //如果有特殊字符
if (reg.test(v)) {
num++;
}
if (v.length < 6) { //如果密码小于6
num--;
}
return num;
}
</script>