typemismatch 是 validitystate 对象中标识输入值类型不匹配的布尔属性,当 type="email" 缺 @ 或域名结构、type="url" 缺协议时为 true,仅作基础语法判断,不验证真实性或可访问性。

直接读取 input.validity.typeMismatch 就能判断邮箱或网址格式是否出错——它在用户输入明显不符合 type="email" 或 type="url" 要求时自动为 true,比如输入 user@、example.com(缺协议)或空格开头等。
typeMismatch 是什么
它是 ValidityState 对象中的一个布尔属性,专门用于标识「输入值类型不匹配」。当 input 设置了 type="email" 却没含 @ 和域名结构,或设了 type="url" 却没以 http:// 或 https:// 开头时,该属性就会返回 true。
- 注意:它不校验邮箱是否真实存在,也不检查 URL 是否可访问,只做基础语法判断
-
type="email"允许user@localhost这类本地域,仍算typeMismatch === false -
type="url"会拒绝example.com,但接受https://example.com/path?x=1
怎么准确读取和响应
别依赖 input.checkValidity() 或 submit 事件才查——应在用户失焦(blur)或实时(input)时主动检查,结合 validity.typeMismatch 做反馈:
- 用
input.addEventListener('blur', () => { if (input.validity.typeMismatch) { /* 提示格式错误 */ } }) - 避免仅靠
!input.validity.valid判断,因为可能由valueMissing或patternMismatch引起 - 显示提示前,建议先确认
input.validity.valid === false且input.validity.typeMismatch === true,排除其他错误干扰
配合 pattern 做更细粒度控制
原生 typeMismatch 规则较宽松,如需限制邮箱用户名不能含连续点号、URL 必须是 HTTPS 等,可加 pattern 属性:
<input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}">- 此时若格式不符,触发的是
patternMismatch,而非typeMismatch;两者互斥,不会同时为true - 用
setCustomValidity()可覆盖默认提示文案,让错误信息更明确
服务端仍需独立验证
typeMismatch 是前端友好提示,不是安全防线:
- 用户可禁用 JS、绕过表单提交、用工具直接发请求
- 浏览器兼容性有限:IE9 及以下完全不支持
type="email"和validityAPI - 后端必须用可靠正则或专用库(如
validator.js)重新校验,且要查 MX 记录、防临时邮箱等业务规则











