会校验，但仅在表单submit时触发基础格式检查：email需含@和域名（如a@b.c），url需含协议或双斜杠（如https://a.com）；不验证域名存在性或邮箱真实性，且js调用form.submit()会绕过校验，必须配合required防空提交。
type="email" 和 type="url" 真的会校验吗
会，但只在表单 submit 时触发，且仅检查基础格式——email 要求含 @ 和域名部分（如 a@b.c），url 要求含协议或双斜杠（如 https://a.com 或 //a.com）。它不验证域名是否存在、邮箱是否真实可用。
常见错误现象：用户输入 user@example（缺顶级域）或 http:/a.com（少一个 /），提交时浏览器直接阻断并弹提示；但若用 JS 手动调用 form.submit() 且没触发原生 submit 流程，校验可能被跳过。
- 必须配合
required才能阻止空值提交；单独写type="email"不拦空字符串 -
title属性决定报错文案，不设则用浏览器默认（如 “请填写有效的电子邮件地址”） - Safari 对
url的校验比 Chrome 更宽松，曾放过example.com这类无协议写法
type="number" 的 value 和 valueAsNumber 别混用
value 始终是字符串，哪怕你写 <input type="number" value="123">，DOM 中取到的仍是 "123"；而 valueAsNumber 是浏览器解析后的数字，非法时返回 NaN。
容易踩的坑：用户手动输入 12e3 或 +45，value 是字符串，valueAsNumber 是 12000 或 45；但输入 abc 时，value 是 "abc"，valueAsNumber 是 NaN，此时直接参与计算会出错。
- 别用
parseInt(input.value)替代input.valueAsNumber，前者对"12.5px"返回12，后者返回NaN，语义更准确 -
min/max限制的是valueAsNumber，不是字符串长度；step="0.1"时输入1.23不报错，但提交时可能被截断为1.2 - 移动端软键盘弹出数字键，但用户仍可粘贴字母——校验不能只靠 type，后端必须二次确认
date 类型的 value 格式一错就“变空”
所有日期类控件（date、datetime-local、time）的 value、min、max 都强制要求 ISO 8601 格式，且大小写、分隔符、补零一个都不能错。
现象：写 <input type="date" value="2026-6-11"> 或 <input type="date" value="11/06/2026">，控件显示为空白，但 DOM 中 value 属性仍存着错误字符串——容易误判为用户没选。
-
date：必须"YYYY-MM-DD"，如"2026-06-11"；"2026-6-11"或"2026/06/11"全无效 -
datetime-local：必须"YYYY-MM-DDThh:mm"或"YYYY-MM-DDThh:mm:ss"，T不可省略，"2026-06-11 19:05"无效 - JS 设置时用
toISOString().slice(0,10)取 date，用toISOString().slice(0,16).replace("T"," ")拆 datetime-local，比手拼安全
tel 和 search 类型不校验，但键盘适配真有用
tel 和 search 在任何主流浏览器中都不触发格式校验，它们的作用纯粹是 UI 层：告诉移动端系统“该弹什么键盘”。别指望 type="tel" 能拦住 abc123。
真实收益在于体验：iOS 上 tel 键盘带 *、# 和数字，search 键盘右下角是“搜索”按钮（非“回车”），且自动显示清空图标；Android 厂商键盘也会响应这些 type 做优化。
-
tel的pattern属性可补充校验（如pattern="[0-9]{11}"），但需搭配title提示才友好 -
search输入框在 Safari 中自动获得圆角和清空按钮，CSS 无需额外 hack - 别用
type="tel"代替type="number"做数值输入——tel允许空格、横线、括号，number才保证纯数字流
最常被忽略的一点：type 切换不可逆。动态改 input.type 在多数浏览器中会被忽略，要换类型得重建 DOM 节点，所以初始选型必须一次到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
