只有 email、url、number、date、datetime-local、month、week、time 这 8 种 type 触发浏览器原生验证；其余如 tel、search、text 不校验；type 还决定移动端软键盘布局，动态切换 type 会重置值状态，日期类仅接受严格 iso 格式。
哪些 type 会触发浏览器原生验证？
只有 email、url、number、date、datetime-local、month、week、time 这 8 种类型在 form.submit() 或调用 input.reportValidity() 时执行格式校验；其余如 tel、search、text 完全不校验。
常见错误现象：以为 type="tel" 能验证手机号格式，结果提交非法值也不报错；或给 type="number" 输入 "12.3.4"，浏览器直接静默忽略（value 变为空字符串）。
-
email：要求含@且前后至少一个字符（u@x合法，@单独不合法） -
url：允许无协议（example.com通过），但若带https://必须格式完整（https://a.b✅，https://❌） -
number：只检查是否可解析为数字（12e3合法，12.3.4不合法）；valueAsNumber对非法值返回NaN - 所有日期类（
date等）：仅校验 ISO 字符串格式，不校验逻辑（2026-02-30会被接受但 UI 显示为空）
type 如何影响移动端软键盘？
软键盘布局由 type 决定，JS 无法模拟或覆盖——这是 HTML 原生能力。误用会导致用户输入体验断裂，比如国内手机号输错键盘、邮箱漏掉 @ 快捷键。
典型踩坑：type="number" 用于手机号，结果开头的 0 被吞掉，长数字显示成科学计数法；或加了 inputmode="text" 却放在 email 上，直接干掉 @ 和 .com 快捷键。
-
tel→ 数字键盘（含*、#），适合国内手机号；别用number -
email→ 键盘带@和.com按钮；加inputmode="text"会失效 -
url→ 键盘带/和.com；若强制 HTTPS，得配pattern="^https?://.+" -
search→ iOS 自带清空按钮（×），部分安卓键盘加搜索图标；type="text"没这个效果
动态切换 type 为什么值会“消失”？
执行 input.type = "number" 这类赋值，会重置控件内部状态：valueAsNumber、valueAsDate 立即变为 NaN 或 null；原 value 字符串虽保留在 DOM 中，但 UI 常清空（尤其日期类），造成“值丢了”的错觉。
这不是 bug，是规范行为。浏览器认为 type 切换意味着语义变更，需清理旧状态。
- 正确做法：用
display: none+visibility: hidden显隐多个input元素，而非复用同一个 - 例如手机号场景，准备两个 input：
<input type="text" id="phone-text">和<input type="tel" id="phone-tel">，按需切换显隐 - 绝对避免在日期类和文本类之间动态改
type，否则用户选的日期直接归零
日期类 value、min、max 的格式陷阱
所有日期相关 type（date、datetime-local、month、week、time）只认严格 ISO 8601 字符串，浏览器不会帮你转换，也不会提示格式错误——它只是默默不渲染或设为空。
常见错误：后端传 "30/04/2026" 给 date 的 value，结果输入框空白；或写 min="2026-4-30"（少补零），导致校验失效。
-
date：必须为"YYYY-MM-DD"（"2026-04-30"✅，"30/04/2026"❌，"2026-4-30"❌） -
datetime-local：格式为"YYYY-MM-DDTHH:mm"（"2026-04-30T14:30"✅，"2026/04/30 14:30"❌） -
month：必须为"YYYY-MM"（"2026-04"✅，"2026/04"❌） - JS 设置时务必用
toISOString().slice(0,10)或toLocaleDateString("sv-SE")生成合规字符串
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
