validity.typeMismatch 是 HTML5 表单验证中判断输入是否违反 type 语义类型的布尔属性；在 email 字段中缺失 @ 或前后无效时为 true，在 url 字段中缺少协议前缀（如 http://）时为 true，可通过 JavaScript 实时检测或 CSS :invalid 伪类自动反馈。
validity.typeMismatch 是 HTML5 表单验证中用于判断用户输入是否与 type 属性声明的语义类型不一致的关键属性。它在邮箱（type="email"）或网址（type="url"）字段中特别实用——只要输入内容不符合该类型的**基本格式规范**，该属性就返回 true。
typeMismatch 在 email 和 url 中的实际触发条件
浏览器对这两类字段的验证逻辑是轻量但明确的，并非全量 RFC 校验：
-
email 类型：只要输入中不含
@符号，或@前后缺少有效字符（如"abc"、"@example.com"、"abc@"），typeMismatch就为true；"a@b.c"这类极简形式也会通过。 -
url 类型：主流浏览器（Chrome/Firefox/Safari）通常只检查是否包含协议前缀（如
http://、https://、ftp://）或以//开头；"example.com"或"www.example.com"会被判定为不匹配，typeMismatch返回true。
如何用 JavaScript 检测并响应 typeMismatch
直接读取元素的 validity.typeMismatch 属性即可，无需手动写正则。建议结合 input 或 blur 事件实时反馈：
- 监听输入框的
input事件，在每次按键后检查：if (inp.validity.typeMismatch) { /* 显示错误提示 */ } - 提交表单前调用
checkValidity()，再遍历各字段的validity.typeMismatch判断问题项 - 注意：该属性仅在字段有值时才有意义；空值会优先触发
valueMissing（若设了required）
配合 CSS 提供视觉反馈更直观
利用 :invalid 伪类可自动样式化未通过类型校验的字段，例如：
立即学习“前端免费学习笔记（深入）”；
<style>
input:invalid[type="email"] { border-color: #e53e3e; }
input:invalid[type="url"] { background-color: #fff5f5; }
</style>
这样用户在输入无效邮箱或网址时，界面会立刻给出颜色或背景变化，无需 JS 也能提升体验。
