javascript 密码强度

Posted 2021-05-03

.is0 {
    background: url(/pictures/progressImg1.png) no-repeat 0 0;
    width: 138px;
    height: 7px;
}

.is10 {
    background-position: 0 -7px;
}

.is20 {
    background-position: 0 -14px;
}

.is30 {
    background-position: 0 -21px;
}

.is40 {
    background-position: 0 -28px;
}

.is50 {
    background-position: 0 -35px;
}

.is60 {
    background-position: 0 -42px;
}

.is70 {
    background-position: 0 -49px;
}

.is80 {
    background-position: 0 -56px;
}

.is90 {
    background-position: 0 -63px;
}

.is100 {
    background-position: 0 -70px;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  
  <script type="text/javascript">
    $.fn.passwordStrength = function (options) {
      return this.each(function () {
        var that = this; that.opts = {};
        that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);

        that.div = $(that.opts.targetDiv);
        that.defaultClass = that.div.attr('class');

        that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;

        v = $(this)
        .keyup(function () {
            if (typeof el == "undefined")
                this.el = $(this);
            var s = getPasswordStrength(this.value);
            var p = this.percents;
            var t = Math.floor(s / p);

            if (100 <= s)
                t = this.opts.classes.length - 1;

            this.div
                .removeAttr('class')
                .addClass(this.defaultClass)
                .addClass(this.opts.classes[t])

        })
        .after('<a href="#">Generate Password</a>')
        .next()
        .click(function () {
            $(this).prev().val(randomPassword()).trigger('keyup');
            return false;
        });
      });

      function getPasswordStrength(H) {
        var D = (H.length);
        if (D > 5) {
            D = 5
        }
        var F = H.replace(/[0-9]/g, "");
        var G = (H.length - F.length);
        if (G > 3) { G = 3 }
        var A = H.replace(/\W/g, "");
        var C = (H.length - A.length);
        if (C > 3) { C = 3 }
        var B = H.replace(/[A-Z]/g, "");
        var I = (H.length - B.length);
        if (I > 3) { I = 3 }
        var E = ((D * 10) - 20) + (G * 10) + (C * 15) + (I * 10);
        if (E < 0) { E = 0 }
        if (E > 100) { E = 100 }
        return E
      }

      function randomPassword() {
        var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$_+";
        var size = 10;
        var i = 1;
        var ret = ""
        while (i <= size) {
            $max = chars.length - 1;
            $num = Math.floor(Math.random() * $max);
            $temp = chars.substr($num, 1);
            ret += $temp;
            i++;
        }
        return ret;
      }
    };

    $.fn.passwordStrength.defaults = {
      classes: Array('is10', 'is20', 'is30', 'is40', 'is50', 'is60', 'is70', 'is80', 'is90', 'is100'),
      targetDiv: '#passwordStrengthDiv',
      cache: {}
    }
    $(document).ready(function () {
      //change the id to point to whatever textbox is going to be the password input
      $('input[id="BodyContent_Tb_Password"]').passwordStrength();
    });
  </script>