应使用白名单式正则配合type="email"，如pattern="^[a-zA-Z0-9._%+-]+@(company.com|team.org)$"，严格锚定首尾、转义点号、明确限定域名，避免否定式或不完整匹配导致的安全漏洞。
直接用 type="email" 搭配 pattern 可以限制企业邮箱后缀，比如只允许 @company.com 或 @team.org。关键不是“禁止其他”，而是“只接受指定域名”，这样逻辑更清晰、正则更可控。
写法示例：只接受 company.com 和 team.org
使用否定式正则容易出错，推荐用白名单方式匹配整个邮箱：
说明：
-
^和$确保从头到尾完全匹配，避免user@company.com.hacker.net这类绕过 -
company\.com中的\.是必须转义的，否则.会被当作通配符 - 括号
(...|...)表示“或”关系，可按需添加更多域名，如(company\.com|team\.org|dev\.io) - 本地部分（@前）仍保留常见字符支持，兼顾员工邮箱习惯（如
zhang.san@company.com）
常见错误与规避方法
以下写法看似合理，但实际有漏洞：
-
pattern=".*@company\.com$"—— 允许abc@x@company.com，因为.*会贪婪匹配到第二个 @ -
pattern="@company\.com$"—— 不匹配完整邮箱，浏览器会因未覆盖开头而始终报错 - 漏写
^或$—— 导致fake@company.com.attacker.net被误认为合法
正确做法是始终锚定首尾，并对域名部分做精确字面匹配。
兼容性与补充建议
该方案在 IE10+、Edge12+、Chrome/Firefox/Safari 当前主流版本均有效，但要注意：
- IE9 及更早版本不支持
type="email"和pattern，必须配合 JS 回退校验 - 移动端键盘依然能正常唤起带 @ 的输入面板，体验不受影响
-
title属性要写得具体，比如“请使用公司邮箱（如 name@company.com）”，比默认提示更友好 - 服务端必须再次验证——前端 pattern 可被禁用 JS 或修改 DOM 绕过，不能作为唯一防线
扩展：排除某些子域名或支持多级域名
如果企业用 hr@cn.company.com 或 dev@staging.team.org，可用如下结构：
其中 ([a-zA-Z0-9-]+\.)* 表示零个或多个“标签+点”的组合，支持任意层级子域，同时保证每段以字母数字开头结尾、不出现连续点或首尾连字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
