javascript 检测密码强度美化版

浏览数：14 / 时间：2015年06月09日

模仿美团的美化

<!DOCTYPE>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="mima.css">
<script src="jquery-1.9.0.min.js"></script>
<script src="MeForCopy.js"></script>
</head>
<body>
<form name="form1" action="">
    <input type="password" size="10" id="password">
    <br>
    <div class="pw-strength">
        <div id="J-pw-strength__bar" class="pw-strength__bar"></div>
        <div class="pw-strength__letter">
            <span class="pw-strength__label">L</span>
            <span class="pw-strength__label">M</span>
            <span class="pw-strength__label pw-strength__label--noborder">H</span>
        </div>
    </div>
    <div id="msg"></div>
</form>
</body>
</html>

  $(function() {
    $("#password").blur(function(event) {
      /* Act on the event */
      var psw = $(this).val(); //okay
      pwStrength(psw);
    });
    $("#password").keyup(function(event) {
      /* Act on the event */
      var psw = $(this).val(); //okay
      pwStrength(psw);
    });
  });

  function pwStrength(psw) {
    if (psw == ‘‘) {
      $("#msg").text(‘no‘);
      $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘);
    } else {
      S_level = checkStrong(psw);
      switch (S_level) {
        case 0:
          $("#msg").text(‘no‘);
          $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘);
        case 1:
          $("#msg").text(‘weak‘);
          $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘).addClass(‘pw-strength__bar--weak‘);
          break;
        case 2:
          $("#msg").text(‘normal‘);
          $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘).addClass(‘pw-strength__bar--normal‘);
          break;
        default:
          $("#msg").text(‘Strong‘);
          $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘).addClass(‘pw-strength__bar--strong‘);
      }
    }
  }

  function checkStrong(sPW) {
    if (sPW.length <= 4) {
      return 0; //密码太短
    }
    Modes = 0;
    for (i = 0; i < sPW.length; i++) {
      //测试每一个字符的类别并统计一共有多少种模式.
      Modes |= CharMode(sPW.charCodeAt(i));
    }
    return bitTotal(Modes);
  }

  //CharMode函数
  //测试某个字符是属于哪一类.
  function CharMode(iN) {
    if (iN >= 48 && iN <= 57) //数字
      return 1;
    if (iN >= 65 && iN <= 90) //大写字母
      return 2;
    if (iN >= 97 && iN <= 122) //小写
      return 4;
    else
      return 8; //特殊字符
  }
  //bitTotal函数
  //计算出当前密码当中一共有多少种模式
  function bitTotal(num) {
    modes = 0;
    for (i = 0; i < 4; i++) {
      if (num & 1) modes++;
      num >>>= 1;
    }
    return modes;
  }

CSS

.pw-strength {
    background: none repeat scroll 0 0 #C9E0DD;
    left: 80px;
    position: absolute;
    top: 45px;
    width: 234px;
}

.pw-strength__bar {
    background: none repeat scroll 0 0 #C9E0DD;
    height: 16px;
    overflow: hidden;
    width: 0;
    -moz-transition: all 0.4s linear 0s;
    transition: all .4s linear;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
}

.pw-strength__letter {
    left: 0;
    position: absolute;
    top: 0;
}

.pw-strength__bar--normal {
    background: none repeat scroll 0 0 #F1D93A;
    width: 154px;
}

.pw-strength__bar--weak {
    background: none repeat scroll 0 0 #EA9292;
    width: 76px;
}

.pw-strength__bar--strong {
    background: none repeat scroll 0 0 #5AAC47;
    width: 232px;
}

.pw-strength__label {
    border-right: 2px solid #FFFFFF;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    width: 76px;
}