表单校验错误消息显示异常求助，求可行实现或优化方案

先解决现有代码的问题 #

你的代码存在几个关键问题导致错误消息无法正常显示或显示异常，修复如下：

1. 修正CSS选择器错误 #

原CSS中.error .show的写法是错误的，应该改为.error.show，因为.show是直接加在.error容器上的类：

body {
  background-color: silver;
  text-align: center;
  margin-top: 20%;
}

.error {
  display: none;
}

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

2. 重置错误状态，避免重复提交时错误堆积 #

全局的错误数组和页面上的错误列表，每次提交前都需要清空，否则重复提交会不断追加旧错误：

let terms = document.getElementById('terms')
const username = document.getElementById('username')
const password = document.getElementById('password')
const form = document.getElementById('form')
let errorList = document.getElementById('error-list')
let errorContainer = document.getElementById('error')

form.addEventListener('submit', (e) => {
  e.preventDefault();
  // 每次提交前清空错误数组和页面上的错误列表
  const errorMessages = [];
  errorList.innerHTML = '';
  errorContainer.classList.remove('show');

  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);
  } else {
    // 校验通过，提交表单
    form.submit();
  }
})

function showErrors(errorMessages) {
  errorMessages.forEach((errorMessage) => {
    const li = document.createElement('li');
    li.innerText = errorMessage;
    errorList.appendChild(li);
  })
  errorContainer.classList.add('show');
}

3. HTML部分无需修改，保持原有结构即可 #

更优的实现方案 #

1. 字段级实时错误提示 #

把错误消息绑定到对应输入字段下方，用户输入时实时反馈，体验更流畅：

<!-- 修改表单结构，给每个输入添加错误容器 -->
<form action="" id="form">
  <div>
    <input required type="text" id="username" placeholder="用户名" />
    <span class="field-error hidden" id="username-error"></span>
  </div>
  <div>
    <input required type="password" name="password" id="password" placeholder="密码" />
    <span class="field-error hidden" id="password-error"></span>
  </div>
  <div>
    <label for="terms">同意条款与条件</label>
    <input type="checkbox" name="terms" id="terms" />
    <span class="field-error hidden" id="terms-error"></span>
  </div>
  <button type="submit" id="button">提交</button>
</form>

.field-error {
  display: block;
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25em;
}

.hidden {
  display: none;
}

const form = document.getElementById('form');
// 统一管理字段校验规则
const fields = {
  username: {
    element: document.getElementById('username'),
    errorElement: document.getElementById('username-error'),
    validate: (value) => value.length < 5 ? '用户名长度必须大于5位' : ''
  },
  password: {
    element: document.getElementById('password'),
    errorElement: document.getElementById('password-error'),
    validate: (value) => value.length < 5 ? '密码长度必须大于5位' : ''
  },
  terms: {
    element: document.getElementById('terms'),
    errorElement: document.getElementById('terms-error'),
    validate: (checked) => !checked ? '必须同意条款' : ''
  }
};

// 绑定实时校验事件
Object.values(fields).forEach(field => {
  const eventType = field.element.type === 'checkbox' ? 'change' : 'input';
  field.element.addEventListener(eventType, () => validateField(field));
});

// 提交时统一校验
form.addEventListener('submit', (e) => {
  let isValid = true;
  Object.values(fields).forEach(field => {
    if (validateField(field)) isValid = false;
  });
  
  if (!isValid) e.preventDefault();
  else form.submit();
});

// 通用校验函数
function validateField(field) {
  const value = field.element.type === 'checkbox' ? field.element.checked : field.element.value;
  const error = field.validate(value);
  
  field.errorElement.textContent = error;
  field.errorElement.classList.toggle('hidden', !error);
  return error;
}

2. 复用错误元素，减少DOM操作 #

如果还是想用统一的错误列表，可以通过批量插入HTML减少DOM操作，提升性能：

function showErrors(errorMessages) {
  // 清空现有内容，批量插入新错误
  errorList.innerHTML = errorMessages.map(msg => `<li>${msg}</li>`).join('');
  errorContainer.classList.add('show');
}

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