input[type="url"]仅基于whatwg标准做基础解析，不保证协议真实、域名可解析或路径合规；必须trim()后用new url()校验，支持中文域名和端口，但不处理相对路径；pattern不可替代且兼容性差；后端须独立校验并正确解码。
input[type="url"] 本身不保证 URL 合法，只做最基础解析
浏览器对 input[type="url"] 的校验，本质就是尝试用 WHATWG URL 标准解析字符串——能被 new URL(value) 成功构造，就算“通过”。这意味着 example.com、//cdn.example.com、ftp://files 都可能过，而 http:/example.com（少一个 /）、https://（无主机）、www.example.com（缺协议）则失败。它不检查协议是否真实存在、域名能否解析、路径是否合规，也不强制 https 或白名单域名。
必须手动 trim() + new URL() 才能可靠捕获格式错误
用户粘贴的 URL 常带首尾空格或不可见字符（比如从微信复制），input[type="url"] 会静默截断但不报错，导致 new URL(" https://a.com ") 直接抛 TypeError。所以实际校验前一定要先 trim()：
function isValidUrl(s) {
try {
new URL(s.trim());
return true;
} catch (_) {
return false;
}
}
-
new URL()比手写正则更稳，避免回溯爆炸和漏判（如localhost:3000、https://例.com） - 它只校验绝对 URL，相对路径（如
/api、./page）会失败，业务若需支持就得换type="text" -
new URL()成功后，还能进一步读取.protocol、.hostname做业务约束，比如url.protocol === 'https:'或url.hostname.endsWith('.mycompany.com')
pattern 属性不能替代 new URL()，且容易写错
pattern 是叠加校验，不是接管逻辑。浏览器会自动给正则加上 ^ 和 $，你再写就失效；它也不处理空格，仍需 JS 配合 trim()。常见坑：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想强制
http或https开头，用pattern="https?://[^\s]+"（末尾[^\s]+防止http://a b这类绕过） - 别抄网上“匹配所有 URL”的超长正则——兼容性差，还可能拒绝合法地址（如带端口、中文域名）
-
pattern在 iOS Safari 和旧版 Android WebView 中常被忽略，不能当作兜底手段
后端校验绝不可省，且必须独立执行
前端任何校验都可被绕过：禁用 JS、改 DOM、curl 直发请求。PHP 必须用 filter_var($url, FILTER_VALIDATE_URL)，Python 用 urllib.parse.urlparse()，JS 后端用 new URL() 再 throw。注意：
- 后端也得先
trim()，否则带空格的字符串直接失败 -
FILTER_VALIDATE_URL遵循 RFC 3986，比前端更严格，支持 IPv6 和 IDN 域名 - 如果业务只要 HTTPS 且限定域名，后端还得额外提取
scheme和host做白名单判断
真正容易被忽略的是：URL 中文路径提交后变成 %E4%BD%A0 这类编码，服务端没正确 urldecode 就会当乱码处理——这个环节出错，前端校验再严也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
