表单验证错误信息无法显示求助：.push()方法未生效问题排查

核心问题1：CSS选择器错误 #

你的CSS里.error .show是后代选择器，表示选中.error元素内部的.show元素，但实际你是给.error容器本身添加show类，所以应该写成.error.show（去掉空格），这样才能正确覆盖display:none的样式：

.error {
  display: none;
}

/* 修正后的选择器：同时拥有error和show类的元素 */
.error.show {
  display: block;
}

核心问题2：错误数组未清空，导致信息累加 #

你的errorMessages是全局变量，每次提交表单时不会重置，重复提交会把旧的错误信息也保留下来，同时错误列表也没清空，会导致重复显示相同错误。需要在每次提交事件开始时清空数组和错误列表：

form.addEventListener('submit', (e) => {
  e.preventDefault()
  // 每次提交前清空错误数组和页面上的错误列表
  errorMessages.length = 0
  errorList.innerHTML = ''

  if (username.value.length < 5) {
    errorMessages.push('用户名长度必须大于5个字符')
  }

  if (password.value.length < 5) {
    errorMessages.push('密码长度必须大于5个字符')
  }

  // 补充条款复选框的验证
  if (!terms.checked) {
    errorMessages.push('必须同意条款与条件')
  }

  if (errorMessages.length > 0) {
    showErrors(errorMessages)
  }
})

额外优化建议 #

• 给错误信息加上样式，提升可读性：

.error-list {
  color: #dc2626;
  list-style: none;
  padding: 0;
}

• 增加实时验证，提升用户体验（以用户名输入框为例）：

username.addEventListener('blur', () => {
  errorMessages.length = 0
  errorList.innerHTML = ''
  if (username.value.length < 5) {
    errorMessages.push('用户名长度必须大于5个字符')
    showErrors(errorMessages)
  } else {
    errorContainer.classList.remove('show')
  }
})

简化的错误信息展示方案（可选） #

如果不想维护数组，也可以直接在验证时创建错误元素并添加，省去数组步骤：

form.addEventListener('submit', (e) => {
  e.preventDefault()
  errorList.innerHTML = ''
  let hasError = false

  if (username.value.length < 5) {
    const li = document.createElement('li')
    li.textContent = '用户名长度必须大于5个字符'
    errorList.appendChild(li)
    hasError = true
  }

  if (password.value.length < 5) {
    const li = document.createElement('li')
    li.textContent = '密码长度必须大于5个字符'
    errorList.appendChild(li)
    hasError = true
  }

  if (!terms.checked) {
    const li = document.createElement('li')
    li.textContent = '必须同意条款与条件'
    errorList.appendChild(li)
    hasError = true
  }

  errorContainer.classList.toggle('show', hasError)
})

内容的提问来源于stack exchange，提问作者Jeramiah Burke