如何使用JavaScript事件监听器无需提交表单即可实现邮箱地址校验

问题原因 #

你原有代码无法正常运行的核心问题有3个：

• 取值时机错误：你在页面初始化阶段就获取了emailInput.value赋值给emailInputValue，此时输入框为空，后续input事件触发时没有重新获取最新的输入值，永远用初始空值做校验，逻辑永远不符合预期
• 缺少失焦事件监听：只绑定了input实时输入事件，没有按需求绑定blur失焦触发校验的逻辑
• 正确状态样式设置不符合需求：你要求格式正确时保持原有边框，原有代码硬编码为蓝色边框，不符合要求

修复后可运行实现 #

推荐用CSS类控制样式，避免硬编码行内样式，后续维护更灵活：

HTML（和你原有代码一致，无需修改） #

<div id="email_div">
  <input type="email" name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
</div>

新增CSS #

/* 错误状态样式 */
#email.invalid {
  border: thin solid red;
}

JavaScript代码 #

const emailInput = document.querySelector("#email");
// 抽离正则，方便后续维护调整
const emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// 封装公共校验函数，两个事件都可以复用
function validateEmail() {
  // 每次校验都获取最新的输入值，去除首尾空格
  const inputValue = emailInput.value.trim();
  // 空值可根据业务需求调整：如果要求必填，空值也可以加错误类；非必填时空值不标红
  if (inputValue && !emailReg.test(inputValue)) {
    emailInput.classList.add('invalid');
  } else {
    emailInput.classList.remove('invalid');
  }
}

// 绑定实时输入校验
emailInput.addEventListener("input", validateEmail);
// 绑定失焦校验
emailInput.addEventListener("blur", validateEmail);

如果你不想新增CSS类，也可以直接操作行内样式实现：

const emailInput = document.querySelector("#email");
const emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
// 先保存输入框原有边框样式，正确状态直接恢复即可
const originBorder = emailInput.style.border || window.getComputedStyle(emailInput).border;

function validateEmail() {
  const inputValue = emailInput.value.trim();
  if (inputValue && !emailReg.test(inputValue)) {
    emailInput.style.border = "thin solid red";
  } else {
    emailInput.style.border = originBorder;
  }
}

emailInput.addEventListener("input", validateEmail);
emailInput.addEventListener("blur", validateEmail);

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