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,}$/
说明：
立即学习“Java免费学习笔记（深入）”；
-
^[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()，需确保锚点完整，否则可能误匹配
