先记住这个答案
type="email" 提供浏览器层面的格式检查,但不是邮箱验证服务。没有 required 时空字符串可以有效;设置 multiple 时可输入逗号分隔的地址列表。带加号的本地部分、子域名都是常见合法形态,自己写简单的“字母数字加 @”正则反而容易误杀。需要确认用户拥有邮箱,仍要发确认邮件。
- 原生校验检查格式,不验证所有权
- 不加
required时空值可有效 - 加号别名与子域名通常应允许
- 真正验证邮箱需发送确认邮件
浏览器到底检查什么
邮箱控件会在约束校验中判断非空值是否像邮箱地址,不符合时阻止正常表单提交并给出提示。required 负责非空,pattern 可进一步限制业务格式,例如只接受某个域名;两者职责不同。它不连接邮件服务器,也无法知道收件箱是否存在。
<label for="email">工作邮箱</label>
<input id="email" name="email" type="email" required
autocomplete="email">
<button type="submit">发送验证邮件</button>user+news@example.com 和 a@sub.example.com 不应因为简单字符串规则被拒绝。若只允许公司域名,除了前端提示还要在服务端验证,而不是只依赖 pattern。
国际化和多地址的边界
国际化域名与非 ASCII 邮箱地址在规范和浏览器实现上仍有边界,不宜向用户承诺任何形式都能通过原生控件。若产品面向多语言用户,应按目标浏览器和后端邮件系统做端到端测试。
multiple 允许逗号分隔的邮箱列表,后端也必须按列表规则解析;不能把整段字符串当一个地址存储。它还会改变空列表与 required 的边界行为,因此想强制至少一个地址时要专门验证。
原生邮箱校验只检查大致语法,不会发网络请求验证域名是否存在,也不能证明用户拥有这个邮箱。注册流程真正需要的是发确认邮件,并在后端做自己的唯一性与长度校验。multiple 属性允许用户输入逗号分隔的多个地址,适合邀请人列表;若业务只收一个账号邮箱,就不要加它。不同浏览器对国际化地址和本地化提示的表现也可能不同,别把前端校验消息当作最终业务规则。
容易答错的地方
- 把语法通过当作邮箱已验证
- 一个格式正确的地址可能不存在,也可能属于别人;确认链接才能验证控制权。
- 用过窄正则禁止加号
- 加号别名是常见地址形式,随意拒绝会让真实用户无法注册。
面试官还会怎么问?
type="email" 空着会报错吗?
没有 required 时通常不会;格式约束主要作用于非空值。
怎样验证公司邮箱?
用前端提示和服务端域名规则限制,再发送验证邮件确认所有权。
multiple 会自动生成多个提交字段吗?
不会。控件提交其当前值,后端需要按逗号分隔列表进行解析。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。