HTML/CSS/JS登录表单邮箱格式验证异常求助

问题根源 #

1. 浏览器默认的type="email"验证允许符合RFC规范但不符合实际常用场景的邮箱（如email@email这类无后缀的格式）；
2. 自定义正则表达式缺少^和$锚点，无法确保整个字符串完全匹配；
3. 原正则的域名部分规则宽松，无法拦截email@email.这类结尾带.的无效格式。

修复步骤 #

1. 修改邮箱输入框配置 #

将原邮箱输入框的type="email"改为type="text"，并替换严格的正则表达式，确保仅匹配符合实际使用场景的邮箱格式：

<input class="form-control" name="email" type="text" value=""
    id="email" required
    pattern="^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])+$"
    oninvalid="setCustomValidity('邮箱格式不正确，请输入如example@email.com的格式')"
    onchange="setCustomValidity('')">

2. 正则规则说明 #

• ^与$：确保整个字符串完全匹配，避免部分匹配导致的误判；
• 用户名部分：支持字母、数字及合法特殊符号，允许带.的用户名（如user.name）；
• 域名部分：强制要求包含至少一个.，且.前后必须有有效字符，结尾不能是.或空字符。

3. 验证效果 #

修改后：

• ✅ email@email.com：验证通过
• ❌ email@email.：验证失败（结尾带无效.）
• ❌ email@email：验证失败（无域名后缀）

可选：保留type="email"的方案 #

若坚持使用type="email"，需在正则中添加^和$锚点，但部分浏览器的默认验证仍可能允许email@email这类格式，所以改为type="text"是更稳妥的选择：

<input class="form-control" name="email" type="email" value=""
    id="email" required
    pattern="^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])+$"
    oninvalid="setCustomValidity('邮箱格式不正确，请输入如example@email.com的格式')"
    onchange="setCustomValidity('')">

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