如何实现输入框的电子邮箱格式验证及错误提示功能？

核心需求 #

当用户输入的电子邮箱缺少必备特定字符（如@、域名部分的.）时，弹出提示：您输入的电子邮箱地址无效

实现代码示例 #

1. HTML结构

先搭建基础的输入表单：

<div class="email-container">
  <label for="email-input">电子邮箱：</label>
  <input type="text" id="email-input" placeholder="请输入您的邮箱">
  <button id="submit-btn">提交</button>
</div>

2. JavaScript验证逻辑

通过监听提交事件或输入事件，执行格式检查：

const emailInput = document.getElementById('email-input');
const submitBtn = document.getElementById('submit-btn');

// 定义邮箱必备字符检查规则
function isValidEmail(email) {
  // 检查是否包含@，且@之后存在至少一个.
  const hasAtSymbol = email.includes('@');
  const hasDotAfterAt = hasAtSymbol ? email.split('@')[1].includes('.') : false;
  return hasAtSymbol && hasDotAfterAt;
}

// 监听提交按钮点击事件
submitBtn.addEventListener('click', function() {
  const emailValue = emailInput.value.trim();
  if (!isValidEmail(emailValue)) {
    alert('您输入的电子邮箱地址无效');
    // 聚焦回输入框，方便用户修改
    emailInput.focus();
    return;
  }
  // 验证通过后的逻辑（如表单提交）
  alert('邮箱格式有效，提交成功');
});

// 可选：实时监听输入，在用户输入过程中提示
emailInput.addEventListener('input', function() {
  const emailValue = this.value.trim();
  if (emailValue && !isValidEmail(emailValue)) {
    // 可替换为页面内文本提示，替代系统alert
    // document.getElementById('error-tip').textContent = '您输入的电子邮箱地址无效';
  } else {
    // document.getElementById('error-tip').textContent = '';
  }
});

3. 可选：页面内提示样式（替代alert）

如果不想用系统弹窗，可添加内联提示元素：

<!-- 在HTML中添加提示元素 -->
<div id="error-tip" style="color: red; margin-top: 8px;"></div>

关键逻辑说明 #

• 必备字符检查：确保邮箱包含@，且@后的域名部分存在.（避免xxx@yyy这类无效格式）
• 交互优化：验证失败后自动聚焦输入框，减少用户操作成本
• 规则扩展：可根据需求调整校验逻辑（如限制@仅出现一次、域名长度等）

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