type="url" 仅校验是否符合 WHATWG URL 标准，即 new URL(input) 不抛错即可，如 example.com、ftp://、//cdn.example 合法，但 www.example.com、http:/example.com、https:// 等非法。
type="url" 会校验哪些格式
type="url" 并不等价于“必须带 https://”，它只按 WHATWG URL 标准做基础解析：能被成功解析为 URL 对象（即 new URL(input) 不抛错）就算通过。这意味着 example.com、ftp://files.example、//cdn.example/js.js（协议相对 URL）都合法；但 http:/example.com（少一个斜杠）、https://（无主机）、user@domain（无协议且非主机名）会失败。
常见校验失效场景和原因
用户填 www.example.com 被拒绝，是因为它缺少协议，无法被解析为完整 URL；浏览器原生验证不自动补 https://。同样，localhost:3000、127.0.0.1:8080 在部分浏览器（如旧版 Safari）中可能被拒，因它们未被规范视为有效主机名（需满足 ASCII 主机+端口可选，且不能是纯数字 IP 的某些实现）。
- Chrome 和 Firefox 接受
localhost，但 Safari 16.4 之前不接受 -
http://后跟空格或制表符会导致解析失败，即使肉眼看起来“只是多了一个空格” - URL 中含中文路径（如
https://例.com/测试）会被自动 Punycode 编码，但输入时若直接写未编码的 Unicode，部分浏览器会拒绝
如何让 type="url" 更贴近实际业务需求
原生 type="url" 过于宽松或过于严格，往往不匹配业务规则。比如你只要 HTTPS 网站，或必须含特定域名，就得自己加约束：
- 用
pattern属性限制协议和结构，例如pattern="https?://.*"（注意：正则在type="url"上仅辅助，不替代解析校验） - 监听
input或blur事件，手动调用new URL(value)并检查.protocol === 'https:'、.hostname.endsWith('.mycompany.com') - 提交前用
checkValidity()触发原生校验，再叠加自定义逻辑，避免绕过 - 服务端仍必须重新校验——前端任何限制都可被绕过
移动端键盘与用户体验陷阱
在 iOS Safari 和 Android Chrome 中，type="url" 会触发带 ".com" 快捷键的软键盘，但这个行为不可靠：iOS 17+ 对非标准 URL（如无协议）可能降级为普通键盘；部分安卓厂商定制键盘完全忽略 type 属性。更麻烦的是，当用户粘贴带空格的链接（如从微信复制），type="url" 会静默失败，且不提示错误——:invalid 伪类也不生效，因为输入框状态没变。
真正能感知问题的方式只有 JS 监听 invalid 事件或主动调用 reportValidity()，否则用户可能一直卡在提交环节，却看不到任何反馈。
原生验证只管“是否算 URL”，不管“是不是你要的 URL”。协议、域名、路径层级、甚至是否可访问，全得自己补刀。别指望一个属性解决所有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
