注册表单输入字段未显示验证错误消息问题求助

大家好，我现在用HTML、CSS和JavaScript开发用户注册表单，计划用Firebase Authentication处理注册逻辑。我想实现一个常见的表单验证功能：当输入无效邮箱、密码长度不符合要求（过短/过长）或者两次输入的密码不匹配时，在对应输入字段下方显示行内错误提示（比如“Please enter a valid email”或“Passwords do not match”）。

按预期，验证不通过时这些错误消息应该自动显示，但现在完全没反应，就好像JavaScript的显示逻辑没被触发一样。我已经给validateInputs函数加了console.log，确认函数确实在正常运行（日志输出符合预期），也检查了CSS有没有样式冲突，按道理样式设置是正确的，但就是看不到错误提示框出现。

以下是我的代码：

HTML 代码 #

<form id="register-form">
  <label for="email">Email</label>
  <input type="email" id="email" placeholder="Email" />
  <div class="error-message" id="email-error">Please enter a valid email</div>
  
  <label for="password">Password</label>
  <input type="password" id="password" placeholder="Password" />
  <div class="error-message" id="password-error">Password must be 6-32 characters long</div>
  
  <label for="repeat-password">Repeat Password</label>
  <input type="password" id="repeat-password" placeholder="Repeat Password" />
  <div class="error-message" id="repeat-password-error">Passwords do not match</div>
  
  <button type="submit">Register</button>
</form>

CSS 代码 #

.register-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  padding: 5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

#register-form {
  flex: 1;
  max-width: 400px;
  background-color: #fcfcfc;
  padding: 2rem 2.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(122, 132, 80, 0.2);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

#register-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #4b5221;
}

#register-form input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  border: 1.5px solid #c8ceaa;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

#register-form input:focus {
  border-color: #7a8450;
  outline: none;
}

#submit {
  width: 100%;
  background-color: #7a8450;
  border: none;
  color: white;
  font-weight: 700;
  padding: 0.75rem;
  border-radius: 25px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: #555;
}

.form a {
  color: #7a8450;
  font-weight: 600;
  text-decoration: none;
}

.form a:hover {
  text-decoration: underline;
}

.register-tip {
  font-size: 0.8rem;
  color: #7a8450;
  font-style: italic;
  margin-top: 0rem;
  margin-bottom: 1rem;
}

input.error {
  border: 2px solid red;
  background-color: #ffe6e6;
}

.error-message {
  color: red;
  font-size: 0.8rem;
  margin-top: 0rem;
  margin-bottom: 0.2rem;
  display: none;
}

#register-form .error-message.show {
  display: block;
}

@media screen and (max-width: 768px) {
  .register-container {
    padding: 2rem 1rem;
  }
  #register-form, .register-info {
    max-width: 100%;
  }
}

JavaScript 代码 #

const form = document.getElementById('register-form');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const repeatPasswordInput = document.getElementById('repeat-password');

function resetErrors() {
  [emailInput, passwordInput, repeatPasswordInput].forEach(input => {
    input.classList.remove('error');
    document.getElementById(`${input.id}-error`).classList.remove('show');
  });
}

function validateInputs() {
  let hasError = false;
  resetErrors();

  if (!emailInput.value.includes('@') || !emailInput.value.includes('.')) {
    emailInput.classList.add('error');
    document.getElementById('email-error').classList.add('show');
    hasError = true;
  }

  if (passwordInput.value.length < 6 || passwordInput.value.length > 32) {
    passwordInput.classList.add('error');
    document.getElementById('password-error').classList.add('show');
    hasError = true;
  }

  if (passwordInput.value !== repeatPasswordInput.value) {
    repeatPasswordInput.classList.add('error');
    document.getElementById('repeat-password-error').classList.add('show');
    hasError = true;
  }

  return !hasError;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (!validateInputs()) {
    alert('Please fix the highlighted fields.');
  } else {
    alert('Form submitted!');
    form.reset();
    resetErrors();
  }
});

我已经做过的排查：

• 确认validateInputs函数在表单提交时正常执行，console.log能输出预期的结果
• 核对了每个错误提示元素的ID，确保和JavaScript中获取的ID完全对应
• 检查了CSS优先级，.error-message.show的display: block应该能覆盖默认的display: none

有没有大佬能帮我找出问题所在？为什么错误提示就是不显示呢？

内容来源于stack exchange