密码匹配校验异常：提示动画中断问题求助

Hey Oscar, let's break down why your password mismatch alert is acting weird and fix it up!

The Root Cause #

The main issue is leftover transitionend event listeners that fire unexpectedly. Here's what's happening step-by-step:

1. When the second password field is empty, your code binds a transitionend listener (with {once: true}) to clear the error content. But since the error is already hidden, this listener never triggers and sticks around.
2. When you type the first character into the second field, the code shows the error message and starts the reveal animation.
3. Once that reveal animation finishes, the leftover transitionend listener from the empty field state fires, clearing the error content abruptly—making it look like the alert vanished mid-animation.
4. When you type more characters, the code re-sets the error message, so it pops back up.

On top of that, you're re-selecting DOM elements every time matchPassword runs, which is unnecessary and can cause unexpected behavior.

Fixed Code #

Let's clean this up with better DOM element management and controlled event listeners:

JavaScript

// Grab elements once, outside the function
const password = document.querySelector("#password");
const password2 = document.querySelector("#password2");
const error = document.querySelector(".password2 .error");

eventListeners();

function eventListeners() {
  password.addEventListener('input', matchPassword);
  password2.addEventListener('input', matchPassword);
}

function matchPassword() {
  // Clear any existing transitionend listeners first to avoid leftovers
  error.removeEventListener('transitionend', clearErrorContent);

  if (password2.value === "") {
    // Bind the listener only when we're hiding the error
    error.addEventListener('transitionend', clearErrorContent, { once: true });
    error.classList.remove("show");
  } else if (password.value !== password2.value) {
    // Set the error message and show it
    error.innerHTML = `<p>Passwords don't match</p>`;
    error.classList.add("show");
  } else {
    // Bind the listener when hiding the success state
    error.addEventListener('transitionend', clearErrorContent, { once: true });
    error.classList.remove("show");
  }
}

// Reusable function to clear error content
function clearErrorContent() {
  error.innerHTML = '';
}

CSS (no changes needed, included for context)

.error {
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  background: #d5d5d5;
  text-align: center;
}
.show {
  max-height: 100px;
  transition: max-height 1s ease-in;
}

HTML (unchanged)

<div class="password">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" placeholder="Password">
  <div class="error"></div>
</div>
<div class="password2">
  <label for="password2">Password:</label>
  <i class="fas fa-lock icono-input"></i>
  <input type="password" name="password2" id="password2" placeholder="Repeat password">
  <div class="error"></div>
</div>

Key Improvements #

• Reused DOM Elements: We grab password, password2, and error once at the start instead of querying the DOM every time the input changes.
• Controlled Event Listeners: We remove any existing transitionend listener before adding a new one, so no leftover listeners fire unexpectedly.
• Reusable Clear Function: We extracted the content-clearing logic into a separate function for cleaner code.
• Clearer Error Message: Changed "no match passwords" to "Passwords don't match" for better readability.

This should fix the glitch where the error alert disappears mid-animation when typing the first character, and keep the animation smooth throughout all input states.

内容的提问来源于stack exchange，提问作者Oscar VA