input[type="url"]仅校验是否符合whatwg基础url结构，能被new url()成功解析即通过，如http://a、//cdn.example.com可通过，而github.com、http:/example.com则失败；它不验证协议真实性、域名可达性或路径合规性，且对空格、中文等静默截断，必须配合trim()和new url()前端校验及后端filter_var()独立验证。
input[type="url"]到底校验什么
它只做最基础的 WHATWG URL 解析尝试：能被 new URL(value) 成功构造，就算“通过”。这意味着 http://a、//cdn.example.com、ftp://files 都可能过，而 http:/example.com（少一个/）、https://（无主机）、www.example.com（缺协议）则失败。它不检查协议是否真实存在、域名能否解析、路径是否合规，也不强制 https 或白名单域名。
为什么用户输“github.com”就报错
因为 type="url" 要求输入必须是**绝对 URL**，即含协议（http://、https:// 等）+ 主机名。以下都会被浏览器拒绝：
-
github.com（无协议） -
www.github.com（无协议） -
//api.example.com（协议相对 URL，在部分浏览器如 Safari 16.4 之前会失败） -
http://（有协议但无主机）
这不是 bug，而是规范行为——type="url" 的设计目标就是筛掉完全无结构的乱输，不是帮你补协议或降级处理。
空格、中文、粘贴带来的静默陷阱
用户从微信、邮件复制链接时，常带首尾空格或不可见字符，input[type="url"] 会静默截断，既不触发 :invalid，也不报错。更隐蔽的是：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 提交时，空格仍按普通
input行为编码为+，中文仍被 UTF-8 编码，后端收到的可能是https%3A%2F%2Fexample.com%2F%E4%BD%A0%E5%A5%BD - 直接用
new URL(input.value)校验会因未trim()抛TypeError，导致前端逻辑中断 - 移动端粘贴含换行符的 URL（比如多行文本中复制了一整段），
pattern会直接失效
务必在 blur 或 submit 时手动 input.value.trim()，再传给 new URL()。
pattern 属性能补多少漏洞
pattern 不是替代方案，只是叠加提示。浏览器会自动给正则加上 ^ 和 $，你再写就重复了。常见误区：
- 想强制
https?开头，得写pattern="https?://[^\s]+$"（[^\s]+防空格，+确保至少一个非空格字符） - 匹配中文路径不能直接写
例.com/测试，得先encodeURIComponent()再写正则，否则跨浏览器行为不稳定 -
pattern在 iOS Safari 和旧版 Android WebView 中常被忽略，不能当兜底手段 - 它不校验空值，仍要配
required
真正可靠的校验点只有两个：JS 主动调用 new URL(s.trim()) 捕获异常，以及后端用 filter_var($url, FILTER_VALIDATE_URL) 或等价实现独立验证——这两步缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
