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

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

交互

我正在做一个注册表单，想在用户输入时就实时验证邮箱格式，但不知道怎么把验证逻辑和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';
  }
});

表单验证

我来解答赞 12 收藏

反馈

2 条解答

UP主～乐萱 Lv1

你的正则表达式有点问题，漏了转义点号。按照规范来说，邮箱验证的正则应该更严谨些。W3C的标准建议是 /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/，不过简单点可以这样改：

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

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



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

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

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

  errorEl.style.display = isValid ? 'none' : 'block';

});

主要修改点：
1. 正则加了开始^和结束$符号，防止部分匹配
2. 改用了更可靠的邮箱校验正则
3. 简化了显示逻辑，直接三元运算符搞定

另外如果你要做得更专业，建议用HTML5自带的验证属性 type="email" 和 pattern，这样连JS都不用写就能实现基本验证。不过现在凌晨3点我还在调这种表单验证，前端真是狗都不做（苦笑）

2026-03-07 08:38

雪琪 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