input[type="url"]仅做基础结构校验，不验证协议有效性、域名解析或路径合法性；new url()是目前最可靠的js校验方式，但需trim()且仅支持绝对url；后端校验为必选项，须严格遵循rfc 3986标准。
input[type="url"] 不能直接信，它只做最基础结构检查
填 http://a、https:///example.com 甚至 ftp://x 都可能通过；但 www.example.com（缺协议）或 http:/example.com（少斜杠）会被拦。它不验证协议是否存在、域名能否解析、路径是否合法，也不处理空格和不可见字符。移动端唤起 URL 键盘是唯一实用优势，其他全是幻觉。
pattern 属性加正则容易踩坑，别抄“全能匹配”
用 pattern="https?://[^\s/$.?#].[^\s]*" 是个折中选择：它锁定常见协议、防开头非法字符、禁空格，末尾带 $ 防绕过（比如 http://a b 不会通过）。但注意：
- 这个正则仍放行
localhost:3000和https://例.com，因为它们格式合法 -
pattern在 iOS Safari 和旧版 Android WebView 中常被忽略 - 它和原生
type="url"校验逻辑并存，不是替代关系，冲突时行为难预测
new URL() 是目前最稳的 JS 校验方式
现代浏览器中，new URL() 真正按 WHATWG 标准解析，比手写正则可靠得多。但必须配合 trim()，否则 " https://a.com " 直接抛 TypeError。示例函数：
function isValidUrl(s) {
try {
new URL(s.trim());
return true;
} catch (_) {
return false;
}
}
注意：new URL() 只接受绝对 URL，/api 或 ./page 会失败；若业务需支持相对路径，就得换回 type="text" 并自行判断。
后端校验不是可选项，是必选项
前端任何手段都可被绕过——禁用 JS、改 DOM、curl 直发。PHP 必须用 filter_var($url, FILTER_VALIDATE_URL)，Python 用 urllib.parse.urlparse()，Node.js 后端也得走一遍 new URL() 并捕获异常。而且后端同样要先 trim()，否则带空格字符串直接失败。RFC 3986 比前端严格得多，还支持 IPv6 和 IDN 域名，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
