原生JS邮箱验证问题：无法区分空值与格式错误提示

你的问题出在验证逻辑的执行顺序和分离上：

• 先调用field(email, 1, "Email cannot be blank")检查空值，随后立刻调用checkEmail()，后者会直接覆盖邮箱对应的错误提示内容，导致空值提示被格式检查的提示（或占位符"message"）冲掉。
• checkEmail()函数没有区分"空值"和"格式错误"两种情况，空值自然不匹配正则，会错误地显示格式相关提示。

修改后的完整代码 #

JavaScript部分

const form = document.querySelector("form"),
  user = document.getElementById("name"),
  email = document.getElementById("email"),
  msg = document.getElementById("comment"),
  errorMsg = document.getElementsByClassName("error"),
  container1 = document.getElementById("form-container"),
  container2 = document.getElementById("form-container2");

// 通用非空验证函数
let validateRequired = (id, serial, message) => {
  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.classList.add("invalid");
    return false; // 返回验证结果，方便后续判断
  }
  return true;
}

// 邮箱专属验证：整合空值+格式检查
function validateEmail() {
  const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  // 先检查是否为空，空值直接返回，不检查格式
  if (!validateRequired(email, 1, "邮箱不能为空")) {
    return;
  }
  // 非空时检查格式
  if (!email.value.match(emailPattern)) {
    errorMsg[1].innerHTML = "邮箱格式错误";
    email.classList.add("invalid");
  } else {
    errorMsg[1].innerHTML = "";
    email.classList.remove("invalid");
  }
}

form.addEventListener("submit", (e) => {
  e.preventDefault();

  // 验证姓名和留言的非空
  validateRequired(user, 0, "姓名不能为空");
  validateRequired(msg, 2, "留言不能为空");
  // 单独验证邮箱（包含空值和格式逻辑）
  validateEmail();

  if (!user.classList.contains("invalid") &&
    !email.classList.contains("invalid") &&
    !msg.classList.contains("invalid")
  ) {
    location.href = form.getAttribute("action");
    container1.classList.add("hide");
    container2.classList.remove("hide");
  }
});

HTML部分（保持原结构即可）

<div class="form-field">
  <input type="text" id="email" placeholder="Email Address">
  <div class="error"></div>
</div>

关键修改点说明 #

1. 拆分验证逻辑：
   把通用非空验证拆成独立函数validateRequired，返回布尔值控制后续流程；邮箱验证整合空值检查和格式检查，避免重复调用导致的提示覆盖。
2. 调整执行顺序：
   提交时不再重复调用邮箱的非空检查，直接调用整合后的validateEmail，确保空值和格式错误的提示互不干扰。
3. 完善提示文本和类控制：
   替换占位符提示为明确的中文文案，恢复invalid类的添加/移除逻辑，保证验证状态和样式一致。

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