JavaScript表单验证：浏览器中有效状态重置与错误反馈的完整实现

<form id="form">
  <label for="firstname"> First Name* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Please enter First Name
  </span>
</form>

#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  const firstNameField = document.getElementById("firstname");
  let valid = true; // 初始假设为有效

  if (!firstNameField.value) { // 如果输入字段为空（无效）
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible"); // 显示错误信息
    firstNameField.classList.add("invalid"); // 添加无效样式
    nameError.setAttribute("aria-hidden", false); // 使错误信息对屏幕阅读器可见
    nameError.setAttribute("aria-invalid", true); // 标记输入为无效
    // valid = false; // 应该在这里设置 valid 为 false
  }
  // 缺少处理输入有效时的逻辑
  return valid; // 这里的 valid 始终为 true，因为没有地方将其设置为 false
}

<form id="form">
  <label for="firstname"> First Name* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Please enter First Name
  </span>
</form>

#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  const firstNameField = document.getElementById("firstname");
  const nameError = document.getElementById("nameError"); // 将 nameError 的获取移到外面，方便在 else 中使用

  // 假设初始有效性为 true，并在发现错误时设置为 false
  let formIsValid = true; 

  if (!firstNameField.value) { // 如果输入字段为空（无效）
    nameError.classList.add("visible"); // 显示错误信息
    firstNameField.classList.add("invalid"); // 添加无效样式
    nameError.setAttribute("aria-hidden", false); // 使错误信息对屏幕阅读器可见
    nameError.setAttribute("aria-invalid", true); // 标记输入为无效
    formIsValid = false; // 表单无效
  } else { // 如果输入字段有值（有效）
    nameError.classList.remove("visible"); // 移除错误信息显示
    firstNameField.classList.remove("invalid"); // 移除无效样式
    nameError.setAttribute("aria-hidden", true); // 隐藏错误信息对屏幕阅读器
    nameError.setAttribute("aria-invalid", false); // 标记输入为有效
  }

  // 如果有其他字段需要验证，可以在这里继续添加类似的 if/else 结构
  // 例如：
  // const emailField = document.getElementById("email");
  // if (!emailField.value || !isValidEmail(emailField.value)) {
  //   formIsValid = false;
  //   // 显示邮件错误
  // } else {
  //   // 隐藏邮件错误
  // }

  // 只有当所有字段都有效时，才允许表单提交（如果需要）
  // 否则，e.preventDefault() 已经阻止了提交
  // return formIsValid; // 如果需要根据验证结果决定是否提交，这里可以返回
}

// 辅助函数（如果需要更复杂的验证，例如邮箱格式）
// function isValidEmail(email) {
//   // 简单的邮箱正则验证
//   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
// }