input[type="email"]仅校验单邮箱，多邮箱需手动拆分、逐个正则校验；推荐用/^[\s@]+@[\s@]+.[\s@]+$/基础校验，支持,;\n分隔，过滤空项，前端提示首个错误并高亮，后端必须重复校验。
用 input[type="email"] 只能校验单个邮箱，别指望它处理逗号分隔的列表
浏览器原生的 input[type="email"] 校验机制只识别整个输入框内容为一个邮箱地址。如果你填 user1@example.com,user2@example.com，它会直接报错——因为逗号、空格、多个 @ 都不符合单邮箱格式。这不是 bug，是设计如此。
所以必须自己拆分、逐个校验。核心思路是：监听提交或失焦事件 → 按分隔符切分字符串 → 过滤空项 → 对每个子串调用邮箱正则或 HTMLInputElement.checkValidity()（需先临时设为单值）。
推荐用正则 + split() 手动校验，避免 DOM 搞得太重
比起反复创建临时 input 元素来复用 checkValidity()，直接用正则更轻量、可控性强。注意别抄网上那些过度复杂的 RFC 5322 全兼容正则——实际项目里只要防明显错误（比如没有 @、没有域名、连续点号）就够了。
实操建议：
- 用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/做基础校验，它能拦住abc、@example.com、abc@这类明显非法格式 - 分隔符优先支持英文逗号
,、分号;和换行符\n，用value.replace(/\s*[,;\n]\s*/g, '\n').split('\n')统一处理空白 - 务必
.filter(item => item.trim())去掉空行和纯空格项，否则""会过正则（因为^$不匹配，但你的正则没锚定两端？等等——要加^和$！）
提交前校验失败时，别只弹 alert()，要定位到第一个错误邮箱
用户贴了 20 个邮箱，第 17 个错了，你 alert 说“邮箱格式不正确”，他得手动数。体验极差。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
更实用的做法：
- 遍历校验结果，记录第一个不通过的邮箱索引和值
- 用
setCustomValidity()绑定到原input上，消息写成邮箱格式错误：“xxx@”（第 17 个） - 聚焦该
input并scrollIntoView({block: 'nearest'})，方便用户快速定位 - 如果业务允许，把所有错误邮箱高亮显示在下方提示区（比如用
<span style="color:red">xxx@</span>），比纯文字更直观
后端必须重复校验，前端校验只是用户体验层
前端一切校验都可绕过。用户禁用 JS、用 curl 直接 POST、甚至改 DOM 属性都能跳过你的 JS 校验逻辑。
所以后端收到字段后，仍要执行相同逻辑：按分隔符切分 → 逐个正则校验 → 任一失败就返回 400，并带上具体错误位置（如 "invalid_emails": ["xxx@"]）。前后端正则最好完全一致，避免出现“前端说对、后端说错”的扯皮。
容易被忽略的一点：分隔符本身可能出现在邮箱本地部分里，比如 "john.doe+newsletter@example.com" 是合法的，但如果你用 . 或 + 当分隔符就完蛋了。所以只信任用户明确使用的分隔符（, ; \n），别自作聪明切点号或加号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
