type="url" 仅做基础格式检查，无法校验协议有效性、dns存在性、路径合法性及粘贴污染；需结合pattern限制协议和空格，并用url构造函数+trim+try/catch进行可靠解析校验。
input type="url" 只能拦住明显缺协议或域名结构的输入，比如空字符串或 abc，但对 http://a、www.example、https:///path 这类“形似URL”的乱写照样放行。它不是 URL 校验器，只是格式守门员。
为什么 type="url" 不够用
浏览器原生验证只检查是否含协议（http://、https:// 等）+ 域名部分（至少一个点或斜杠），不解析、不联网、不校验 DNS 是否存在、路径是否合法、端口是否有效，更不处理空格、中文、控制字符等常见粘贴污染。
- 用户粘贴
https://example.com（首尾带空格）→ 通过验证 - 输入
foo://bar或file:///C:/test→ 大部分浏览器认为合法 - 填
www.example（无协议）→ Safari 可能放过，Chrome 拒绝，行为不一致 -
pattern和type="url"并存时，部分旧版 Android WebView 会忽略pattern
用 pattern 补一刀，但别抄“全能正则”
加 pattern 是最轻量的增强方式，目标不是匹配所有 RFC 合法 URL，而是过滤掉明显非法的输入。推荐这个平衡写法：
<input type="url" pattern="https?://[^\s/$.?#].[^\s]*" title="请输入以 http:// 或 https:// 开头的有效网址" required>
说明：
-
https?锁定最常用协议，避免ftp://或自定义协议干扰 -
[^\s/$.?#]确保域名开头不是空格、斜杠、美元符等非法字符 -
[^\s]*允许路径、查询参数、锚点，但禁止空格（防粘贴污染） - 末尾没加
$—— 浏览器自动补全，显式写反而在某些 WebView 中出错 - 必须配
title，否则错误提示是模糊的“请与所要求的格式匹配”
真正靠谱的校验得靠 URL 构造函数
前端需要确定“这串字符能不能被浏览器当真实 URL 解析”，new URL() 比任何正则都准，且代码更短、逻辑更清晰。
实操要点：
- 先
.trim()去首尾空格，否则" https://a "会抛TypeError - 必须用
try/catch捕获TypeError，不能只靠if判断 - 不支持相对路径（如
/api、./index.html），如果业务允许，就得绕开URL构造函数 - 校验后建议再检查
url.protocol和url.hostname是否非空，排除http://.这类边缘 case
示例：
function isValidUrl(str) {
try {
const url = new URL(str.trim());
return url.protocol && url.hostname;
} catch {
return false;
}
}
移动端和兼容性要盯紧
不同环境表现差异大，容易被忽略的点：
- Safari 的错误提示文案和触发时机和其他浏览器不一致，有时延迟到失焦才报
- 部分旧版 Android WebView（如 Android 4.4 内置）完全忽略
type="url"，退化为普通文本框 -
inputmode="url"在 iOS 上能调出带.com快捷键的键盘，但 Android 支持度差，别依赖它做校验 - 所有前端限制都可被禁用 JS 或直接改 DOM 绕过，
URL构造函数校验也必须在后端复现一次
真正关键的不是“怎么拦”，而是“在哪拦”：客户端快速反馈体验，服务端彻底兜底安全。两者缺一不可，少一个就等于没校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
