使用AJAX提交表单后密码进度条无法重置的问题求助

Hey there! Let's tackle that password meter reset issue you're facing after submitting your form via AJAX. The root of the problem is that your current code only updates the meter on keyup events—when you clear the password field (either manually or after a successful AJAX submit), that action doesn't trigger a keyup, so the meter stays stuck in its last state. Here's how to adjust your code to fix this:

Step 1: Refactor the Plugin to Add a Reset Function #

First, let's extract the reset logic into a reusable function and add a public method to your plugin so we can call it whenever we need to reset the meter:

$(function() {
  $.fn.bootstrapPasswordMeter = function(options) {
    var settings = $.extend({
      minPasswordLength: 1,
      level0ClassName: 'progress-bar-danger',
      level0Description: 'Weak',
      level1ClassName: 'progress-bar-warning',
      level1Description: 'Poor',
      level2ClassName: 'progress-bar-info',
      level2Description: 'Good',
      level3ClassName: 'progress-bar-primary', // Fixed: Bootstrap classes are lowercase
      level3Description: 'Strong',
      level4ClassName: 'progress-bar-success',
      level4Description: 'Very strong',
      parentContainerClass: '.form-group'
    }, options || {});

    // Reusable reset function
    var resetPasswordMeter = function($input) {
      var progressBar = $input.closest(settings.parentContainerClass).find('.progress-bar');
      // Reset width and text
      progressBar.css('width', '0%');
      progressBar.text('');
      // Remove all level classes
      progressBar.removeClass(settings.level0ClassName)
                 .removeClass(settings.level1ClassName)
                 .removeClass(settings.level2ClassName)
                 .removeClass(settings.level3ClassName)
                 .removeClass(settings.level4ClassName);
    };

    $(this).on("keyup", function() {
      var $this = $(this);
      var progressBar = $this.closest(settings.parentContainerClass).find('.progress-bar');
      var progressBarWidth = 0;
      var progressBarDescription = '';

      if ($this.val().length >= settings.minPasswordLength) {
        var zxcvbnObj = zxcvbn($this.val());
        progressBar.removeClass(settings.level0ClassName)
                   .removeClass(settings.level1ClassName)
                   .removeClass(settings.level2ClassName)
                   .removeClass(settings.level3ClassName)
                   .removeClass(settings.level4ClassName);

        switch (zxcvbnObj.score) {
          case 0:
            progressBarWidth = 0;
            progressBar.addClass(settings.level0ClassName);
            progressBarDescription = settings.level0Description;
            break;
          case 1:
            progressBarWidth = 25;
            progressBar.addClass(settings.level1ClassName);
            progressBarDescription = settings.level1Description;
            break;
          case 2:
            progressBarWidth = 50;
            progressBar.addClass(settings.level2ClassName);
            progressBarDescription = settings.level2Description;
            break;
          case 3:
            progressBarWidth = 75;
            progressBar.addClass(settings.level3ClassName);
            progressBarDescription = settings.level3Description;
            break;
          case 4:
            progressBarWidth = 100;
            progressBar.addClass(settings.level4ClassName);
            progressBarDescription = settings.level4Description;
            break;
        }
      } else {
        progressBarWidth = 0;
        progressBarDescription = '';
      }

      progressBar.css('width', progressBarWidth + '%');
      progressBar.text(progressBarDescription);
    });

    // Add public reset method to the plugin
    this.reset = function() {
      $(this).each(function() {
        resetPasswordMeter($(this));
      });
      return this;
    };

    return this;
  };

  // Initialize the password meter and store a reference to it
  var passwordMeter = $('#Password').bootstrapPasswordMeter({
    minPasswordLength: 3
  });

  // Step 2: Trigger Reset on AJAX Success
  $('#insert-data').on('click', function(e) {
    e.preventDefault(); // Prevent default form submit if this is a submit button

    // Your existing AJAX submission logic
    $.ajax({
      url: 'your-form-submit-url', // Replace with your actual URL
      method: 'POST',
      data: $('form').serialize(), // Serialize your form data
      success: function(response) {
        // Clear the password input first
        $('#Password').val('');
        // Reset the password meter
        passwordMeter.reset();
        // Optional: Add success feedback here
        alert('Data inserted successfully!');
      },
      error: function(xhr) {
        // Handle submission errors
        console.error('Submission failed:', xhr.responseText);
      }
    });
  });

  // Optional: Reset meter if form is reset manually
  $('form').on('reset', function() {
    // Use setTimeout to ensure form reset completes before updating the meter
    setTimeout(function() {
      passwordMeter.reset();
    }, 10);
  });
});

Key Changes Explained #

• Reusable Reset Function: The resetPasswordMeter function handles all the steps to reset the progress bar—clearing its width, text, and removing all level-specific classes.
• Public Reset Method: Adding a reset method to the plugin lets us trigger the reset from outside the plugin easily.
• AJAX Success Trigger: After your form data is successfully submitted via AJAX, we clear the password input and call passwordMeter.reset() to reset the meter.
• Fixed Bootstrap Class: Corrected progress-bar-Primary to progress-bar-primary (Bootstrap uses lowercase class names for consistency).
• Optional Form Reset Listener: Added a listener for the form's reset event to handle cases where the user resets the form manually.

内容的提问来源于stack exchange，提问作者Patrick Dimaano