jquery - StrengthJS密码强度仅在一个功能中起作用，但在有多个功能时不起作用

我在一个函数中具有StrengthJS密码强度，并且我还有2个其他函数用于选项卡中的其他表单。但是，我只能运行一个功能，而必须注释掉其他两个功能。为什么会这样呢？
我的职能是

    function CheckAdministratorPasswordStrength() {
    $("#txtPassword").strength({
        strengthClass: 'strength',
        strengthMeterClass: 'strength_meter',
        strengthButtonClass: 'button_strength',
        strengthButtonText: 'Show password',
        strengthButtonTextToggle: 'Hide Password'
    });
}
function CheckModeratorPasswordStrength() {
    $("#txtAdministrationManufacturerModeratorPassword").strength({
        strengthClass: 'strength',
        strengthMeterClass: 'strength_meter',
        strengthButtonClass: 'button_strength',
        strengthButtonText: 'Show password',
        strengthButtonTextToggle: 'Hide Password'
    });
}
function CheckDealerPasswordStrength() {
    $("#txtAdministrationDealerPassword").strength({
        strengthClass: 'strength',
        strengthMeterClass: 'strength_meter',
        strengthButtonClass: 'button_strength',
        strengthButtonText: 'Show password',
        strengthButtonTextToggle: 'Hide Password'
    });
}

并且它们在我的document.ready函数中被调用，我还应该让所有人都知道它们在外部文件中。

最佳答案

这是您正在使用的javascript库的问题。请参见github站点上的this issue report中的Strength.js。

似乎其他用户为此建议了一个修复程序。您可以尝试应用其修复程序。打开strength.js文件，将第93行更改为：

thisid = this.$elem.attr('id');

至：

var thisid = this.$elem.attr('id');

我将github中的strength.js文件复制到下面的代码段中，并进行了更改，它对于多个密码字段似乎正常工作。同样，您似乎只是在指定默认选项，因此无需传递所有默认选项，只需调用.strength()而不传递任何参数，它将使用默认选项。

$(document).ready(function() {
  $('#pw1').strength();
  $('#pw2').strength();
  $('#pw3').strength();
});

<link href="https://rawgit.com/aarondo/Strength.js/master/src/strength.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  /*!
   * strength.js
   * Original author: @aaronlumsden
   * Further changes, comments: @aaronlumsden
   * Licensed under the MIT license
   */
  ;
  (function($, window, document, undefined) {

    var pluginName = "strength",
      defaults = {
        strengthClass: 'strength',
        strengthMeterClass: 'strength_meter',
        strengthButtonClass: 'button_strength',
        strengthButtonText: 'Show Password',
        strengthButtonTextToggle: 'Hide Password'
      };

    // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

    function Plugin(element, options) {
      this.element = element;
      this.$elem = $(this.element);
      this.options = $.extend({}, defaults, options);
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
    }

    Plugin.prototype = {

      init: function() {


        var characters = 0;
        var capitalletters = 0;
        var loweletters = 0;
        var number = 0;
        var special = 0;

        var upperCase = new RegExp('[A-Z]');
        var lowerCase = new RegExp('[a-z]');
        var numbers = new RegExp('[0-9]');
        var specialchars = new RegExp('([!,%,&,@,#,$,^,*,?,_,~])');

        function GetPercentage(a, b) {
          return ((b / a) * 100);
        }

        function check_strength(thisval, thisid) {
          if (thisval.length > 8) {
            characters = 1;
          } else {
            characters = -1;
          };
          if (thisval.match(upperCase)) {
            capitalletters = 1
          } else {
            capitalletters = 0;
          };
          if (thisval.match(lowerCase)) {
            loweletters = 1
          } else {
            loweletters = 0;
          };
          if (thisval.match(numbers)) {
            number = 1
          } else {
            number = 0;
          };

          var total = characters + capitalletters + loweletters + number + special;
          var totalpercent = GetPercentage(7, total).toFixed(0);

          if (!thisval.length) {
            total = -1;
          }

          get_total(total, thisid);
        }

        function get_total(total, thisid) {

          var thismeter = $('div[data-meter="' + thisid + '"]');
          if (total <= 1) {
            thismeter.removeClass();
            thismeter.addClass('veryweak').html('very weak');
          } else if (total == 2) {
            thismeter.removeClass();
            thismeter.addClass('weak').html('weak');
          } else if (total == 3) {
            thismeter.removeClass();
            thismeter.addClass('medium').html('medium');

          } else {
            thismeter.removeClass();
            thismeter.addClass('strong').html('strong');
          }

          if (total == -1) {
            thismeter.removeClass().html('Strength');
          }
        }





        var isShown = false;
        var strengthButtonText = this.options.strengthButtonText;
        var strengthButtonTextToggle = this.options.strengthButtonTextToggle;


        var thisid = this.$elem.attr('id');

        this.$elem.addClass(this.options.strengthClass).attr('data-password', thisid).after('<input style="display:none" class="' + this.options.strengthClass + '" data-password="' + thisid + '" type="text" name="" value=""><a data-password-button="' + thisid + '" href="" class="' + this.options.strengthButtonClass + '">' + this.options.strengthButtonText + '</a><div class="' + this.options.strengthMeterClass + '"><div data-meter="' + thisid + '">Strength</div></div>');

        this.$elem.bind('keyup keydown', function(event) {
          thisval = $('#' + thisid).val();
          $('input[type="text"][data-password="' + thisid + '"]').val(thisval);
          check_strength(thisval, thisid);

        });

        $('input[type="text"][data-password="' + thisid + '"]').bind('keyup keydown', function(event) {
          thisval = $('input[type="text"][data-password="' + thisid + '"]').val();
          console.log(thisval);
          $('input[type="password"][data-password="' + thisid + '"]').val(thisval);
          check_strength(thisval, thisid);

        });



        $(document.body).on('click', '.' + this.options.strengthButtonClass, function(e) {
          e.preventDefault();

          thisclass = 'hide_' + $(this).attr('class');




          if (isShown) {
            $('input[type="text"][data-password="' + thisid + '"]').hide();
            $('input[type="password"][data-password="' + thisid + '"]').show().focus();
            $('a[data-password-button="' + thisid + '"]').removeClass(thisclass).html(strengthButtonText);
            isShown = false;

          } else {
            $('input[type="text"][data-password="' + thisid + '"]').show().focus();
            $('input[type="password"][data-password="' + thisid + '"]').hide();
            $('a[data-password-button="' + thisid + '"]').addClass(thisclass).html(strengthButtonTextToggle);
            isShown = true;

          }



        });




      },

      yourOtherFunction: function(el, options) {
        // some logic
      }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function(options) {
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
      });
    };

  })(jQuery, window, document);
</script>
<label for="pw1">Password 1:</label>
<input id="pw1" type="password" name="" value="">
<label for="pw2">Password 2:</label>
<input id="pw2" type="password" name="" value="">
<label for="pw3">Password 3:</label>
<input id="pw3" type="password" name="" value="">