JavaScript表单验证需结合HTML属性与脚本逻辑，邮箱校验推荐使用兼顾兼容性与常见格式的正则表达式/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/，但前端验证不能替代后端校验。

JavaScript 表单验证通常结合 HTML 属性（如 required、type="email"）与脚本逻辑实现，而邮箱校验最常用且可靠的方式是正则表达式。但要注意：前端验证仅用于用户体验提升，**不能替代后端校验**。

基础表单验证流程

监听表单的 submit 事件，调用 event.preventDefault() 阻止默认提交，再逐项检查字段：

• 获取输入元素值（input.value.trim()），先去空格再判断
• 检查必填项是否为空，或长度是否符合要求（如密码至少6位）
• 对邮箱、手机号等格式化字段，使用正则匹配验证
• 验证失败时，聚焦错误字段并显示提示（可用 element.setCustomValidity() 或自定义提示）

邮箱正则表达式推荐写法

简单实用、兼顾兼容性与常见邮箱格式的正则如下：

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

说明：

• ^[a-zA-Z0-9._%+-]+：用户名部分，支持字母、数字及常见符号（点、下划线、百分号、加号、短横线），至少1位
• @：必须包含且仅一个 @ 符号
• [a-zA-Z0-9.-]+：域名主体，允许字母、数字、点、短横线
• \.[a-zA-Z]{2,}$：必须以点开头，后接至少两个字母的顶级域（如 .com、.org、.cn）

⚠️ 注意：该正则不覆盖所有 RFC 5322 合法邮箱（如带引号或 IP 形式），但已满足绝大多数实际场景；过度复杂的正则反而易出错、难维护。

验证代码示例（含实时反馈）

在输入框失去焦点（blur）或提交时执行校验：

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

emailInput.addEventListener('blur', () => {
  const value = emailInput.value.trim();
  if (value && !emailRegex.test(value)) {
    emailInput.setCustomValidity('请输入有效的邮箱地址');
  } else {
    emailInput.setCustomValidity('');
  }
});

配合 HTML 的 form.reportValidity() 可统一触发浏览器原生提示，体验更一致。

避免常见误区

• 不要只依赖 type="email"：它仅做基础检查，且可被绕过（如直接修改 DOM 或用 curl 提交）
• 不要用过于宽松的正则（如 /.+@.+\..+/）：会放过明显错误（如 @.com）
• 不要忽略国际化域名（IDN）：普通正则不支持中文域名（如 张三@中国.cn），需额外转码（punycode）处理
• 别在正则中盲目加 ^ 和 $：若用 string.match() 而非 test()，需确保锚点完整，否则可能误匹配