页面代码:
<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>