页面代码： 复制代码 代码如下:<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>

　　推荐阅读

　　web开发人员学习jQuery的6大理由及jQuery的优势介绍

jQuery是一个用来简化HTML客户端开发的JS（JavaScrip）库，它支持HTML DOM处理，同时还融合了部分HTML和CSS。许多网站建设公司已经加入了jQuery的阵营，你的公司也该加入了。 下面就来看看jQuery为何对公司有如此大>>>详细阅读

本文标题：js 验证密码强弱的小例子

地址：http://www.17bianji.com/kaifa2/JS/22631.html

 1/2    1