js 验证密码强弱的小例子

  页面代码:

  

复制代码 代码如下:

  <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>