type="email" 单独使用无法可靠校验，必须配合 required、autocomplete="email" 和 inputmode="email"；浏览器仅在提交时校验，非实时，且需处理空格、不可见字符及后端二次校验。
input[type="email"] 单靠这个属性无法可靠拦截无效邮箱，必须配合 required、autocomplete="email" 和 inputmode="email" 才能触发基础校验逻辑并保障移动端体验。
为什么 type="email" 提交时没报错？
浏览器只在表单提交（form.submit() 或点击 type="submit" 按钮）时触发校验，不是实时的；若没加 required，空值或纯空格（如" "）会直接通过；Safari 和旧版 Edge 对 user@domain（缺顶级域）可能放行，Chrome 则可能放过 user@.com 这类明显异常格式。
必须确保：
-
required属性存在，否则校验逻辑不激活 - 用户输入后手动调用
emailInput.value = emailInput.value.trim()，清除首尾空格 - 避免把
pattern当成替代方案——它会禁用原生邮箱语义（如自动补全、拼写检查）
pattern 属性怎么写才不报错？
pattern 中的正则必须符合 JavaScript 语法，且在 HTML 属性里不能出现非法字符类。常见错误是写成 [a-z.-]：中间的 - 被解析为范围符，导致 Invalid character in character class。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确写法：
- 把
-放在字符类开头或结尾：[-a-z._%+]或[a-z._%+-] -
.在字符类内无需转义，但作为域名分隔符时必须写成\. - 完整推荐：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" -
title属性必须同时存在，否则 Chrome 不显示提示文案
JS 补救该监听哪个事件？
别只等 blur。用户粘贴邮箱（尤其带零宽空格 U+200B）后直接点提交，blur 根本不触发，校验就漏了。
更稳妥的做法：
- 监听
input事件做实时 trim 和简单格式标记（比如加class="valid"或class="invalid"） - 提交前统一调用
emailInput.checkValidity()，再用emailInput.reportValidity()强制弹出原生提示 - 判断状态用
emailInput.validity.valid，比手写正则更准——它已融合浏览器对type="email"的全部规则
真正上线后最常出问题的，不是正则写得够不够 RFC 兼容，而是用户粘贴进来的不可见字符、前后空格没清、iOS Safari 忽略 pattern 却又没 fallback JS，以及后端压根没做二次校验——这些环节断掉一个，邮箱字段就等于裸奔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
