zoukankan      html  css  js  c++  java
  • JS实现验证输入框密码强度

    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

     

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

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

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

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

  • 相关阅读:
    4A安全体系
    Linux 安装 Nginx
    Linux 安装 Mysql
    Web容器对比
    Nginx 学习记录
    SO_REUSEADDR选项的平台差异(对于TCP)
    centos下搭建yum服务器
    IOCP 下行为投递的关键点
    网络包解包错误 与 标准io(linux)
    关闭ssh的dns反向解析
  • 原文地址:https://www.cnblogs.com/mahmud/p/11561446.html
Copyright © 2011-2022 走看看