表单验证时如何实时监听输入并动态显示错误提示？

一乐萱提问于 2026-02-24 16:55:21 阅读 74

交互

我正在做一个注册表单，想在用户输入时就实时验证邮箱格式，但不知道怎么把验证逻辑和DOM更新结合起来。试过用input事件监听，但错误信息总是显示不对。

比如下面这段代码，输入非法邮箱时没反应，控制台也没报错，是我哪里漏了吗？

const emailInput = document.getElementById('email');
const errorEl = document.getElementById('email-error');

emailInput.addEventListener('input', () => {
  const isValid = /S+@S+.S+/.test(emailInput.value);
  if (!isValid) {
    errorEl.textContent = '请输入有效的邮箱地址';
    errorEl.style.display = 'block';
  } else {
    errorEl.style.display = 'none';
  }
});

表单验证

我来解答赞 8 收藏

反馈

1 条解答

雪琪 Lv1

你这段代码思路是对的，问题出在正则表达式上，/S+@S+.S+/ 这个写法根本没匹配字母或数字，S 是大写的，它只匹配字符 'S' 本身，不是匹配“非空白字符”。

你应该用小写 s 的反面，也就是 S（注意是反斜杠），或者干脆用更稳妥的邮箱正则。另外，建议加上 trim() 去掉首尾空格，避免用户输个空格就被判无效。

修改后的代码这样写：

const emailInput = document.getElementById('email');

const errorEl = document.getElementById('email-error');



emailInput.addEventListener('input', () => {

  const value = emailInput.value.trim();

  // 简单邮箱正则，够用但不是 RFC 标准（复杂正则容易误伤合法邮箱）

  const isValid = /^[^s@]+@[^s@]+.[^s@]+$/.test(value);



  if (!isValid && value !== '') {

    errorEl.textContent = '请输入有效的邮箱地址';

    errorEl.style.display = 'block';

  } else {

    errorEl.style.display = 'none';

  }

});

如果你还希望在用户输完离开输入框时再做一次最终校验（比如提交前），可以再加个 blur 事件，不过实时验证的话，input 就够用了。

希望能帮到你，我之前也踩过这个正则的坑，大写 S 的时候自己都没发现……

2026-02-24 17:02