使用 input type="email" 可触发浏览器原生邮箱校验，但需搭配 required、autocomplete="email"、inputmode="email" 等属性，并注意空格、粘贴异常等问题，辅以 trim 和 checkvalidity() 等 js 补救。
直接用 input type="email" 就能触发浏览器原生格式校验，但得配对关键属性、处理常见陷阱，否则容易失效或漏判。
基础写法与默认行为
只需设置 type="email"，浏览器就会在表单提交时检查是否含一个 @ 符号，且前后都有非空字符（如 a@b.c 通过，@example.com 或 user@ 不通过）。它不查域名是否存在，也不发任何网络请求。
- 移动端自动弹出带
@和.的邮箱键盘，这是唯一确定的体验提升 - 校验只在
form.submit()或点击type="submit"按钮时触发，不是实时的 - IE9 及以下版本完全忽略该类型，退化为普通文本框，无任何校验
必须搭配的属性组合
单靠 type="email" 不够可靠，要加上这些属性才能发挥基础作用：
-
required：确保字段非空；但注意——若用户输入前后带空格（如
" test@example.com "），原生校验可能失效，需手动 trim -
placeholder：提示格式，比如
placeholder="name@domain.com" - autocomplete="email"：帮助浏览器识别语义，尤其在 Safari 中避免降级为 text 模式
- inputmode="email"：进一步提示移动端使用邮箱键盘，增强兼容性
pattern + title 补强校验
pattern 不是替代 type="email"，而是叠加一层更明确的规则。推荐写法：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" title="请输入有效的邮箱地址（例如：name@domain.com）"
- 正则中
-必须放在字符类开头或结尾，否则报错；^和$不用写，浏览器会自动锚定 -
title属性必须存在，否则 Chrome 等浏览器不显示自定义提示文字 - iOS Safari 会忽略
pattern，所以不能只依赖它
绕过问题与 JS 补救措施
用户粘贴邮箱时可能带不可见字符（如零宽空格 U+200B），或输错格式却没触发提示。这时需要轻量 JS 干预：
- 提交前手动 trim：
emailInput.value = emailInput.value.trim() - 主动调用校验：
if (!emailInput.checkValidity()) { emailInput.reportValidity(); } - 监听
oninput而非仅onblur，避免用户粘贴后直接点提交而跳过反馈 - 用
event.target.validity.valid判断最终状态，比手写正则更准、更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
