JS实现验证输入框密码强度

<!DOCTYPE HTML>
<html>
<head>
  <title>Password Strength</title>
</head>
<script>
  function password_strength(string){
    var h    = 0;
    var size = string.length;
    var result = {};
    string = ('' + string).split('').sort().join('').match(/(.)1*/g);
    for (i = 0; i != string.length; i += 1) {
      result[string[i].charCodeAt(0)] = string[i].length;
    }
    for(var i in result){
      var p = result[i] / size;
      h -= p * Math.log(p) / Math.log(2);
    }
    var strength = (h / 4) * 100;
    if(strength > 100){
      strength = 100;
    }
    return strength;
  }
</script>
<body>
<p>
  <input type="text" id="password" />
</p>
<div style="position: absolute; 300px;border:solid 1px;height: 20px;background-color: red;">
  <div style="position: absolute; 0;height: 20px;background-color: green;" id="green-bar"></div>
  <span id="str" style="position: absolute; 100%;left:0;right: 0;text-align: center;color: white;font-weight: bold;">0%</span>
</div>
<script>
  document.getElementById("password").onkeyup = function(){
    var val = this.value;
    var strength = Math.round(password_strength(val));
    document.getElementById("green-bar").style.width = strength + "%";
    document.getElementById("str").innerText = strength + "%";
  };
</script>
</body>
</html>

code

作者：mahmud（小麦）

出处：https://www.cnblogs.com/mahmud

-------------------------------------------

个性签名：独学而无友，则孤陋而寡闻。做一个灵魂有趣的人！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！

万水千山总是情，打赏一分行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主，哈哈哈(っ•̀ω•́)っ✎⁾⁾！