HTML input[type="url"]仅提供语义提示和基础结构拦截，不可靠过滤；必须协同前端HTML提示、JavaScript主动校验（trim()+new URL()）、后端独立验证（白名单协议与域名）三层面缺一不可。

HTML 网址输入控件本身不做过滤，input[type="url"] 只提供语义提示和极轻量的结构拦截，无法真正过滤非法链接。要可靠过滤不合法的 URL 格式，必须在三个层面协同动作：前端 HTML 提示、前端 JavaScript 主动校验、后端独立验证。缺一不可。

用 type="url" + inputmode 做基础引导

它不是过滤器，但能提升用户体验和初步拦截：

• 设置 type="url" 可唤起移动端带 .com// 快捷键的软键盘
• 加 inputmode="url" 防止 Android WebView 或 QQ 浏览器退化为普通键盘
• 浏览器会在提交时自动检查是否含 : 和 /（如 http://a 通过，example.com 不通过）
• 注意：它不拒绝 foo://bar、git://，也不处理首尾空格——粘贴来的 " https://a.com " 会被静默截断，但不报错

用 JavaScript 主动校验并过滤非法值

这是前端真正起效的过滤环节，核心是 trim() + new URL()：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 必须先 .trim()，否则空格会导致 new URL() 直接抛 TypeError
• 用 try { new URL(s.trim()) } catch 判断格式合法性，比正则更稳（支持 localhost:3000、https://例.com、IDN 域名等）
• 校验通过后可进一步提取 .protocol、.hostname 做业务过滤，例如只允许 https: 或限定域名后缀
• 在 input 或 blur 事件中调用，配合 setCustomValidity() 给出明确提示

用 pattern 做轻量结构约束（慎用）

pattern 是叠加校验，不能替代 JS，且易写错：

• 推荐写法：pattern="https?://[^\s/$.?#].[^\s]*" —— 锁定 http/https，防首尾空格，兼容常见合法变体
• 不要抄“全能正则”，会漏掉端口、中文域名，或引发回溯爆炸
• 它不处理空格，仍需 JS trim() 配合；iOS Safari 对 title 提示支持弱，别依赖它反馈错误
• pattern 在旧版 WebView 中常被忽略，不能当作兜底手段

后端必须独立过滤与白名单控制

所有前端校验都可被绕过，后端才是最终守门员：

• 接收后第一件事就是 trim()，再用语言原生 URL 解析器校验（PHP 用 filter_var($url, FILTER_VALIDATE_URL)，Python 用 urllib.parse.urlparse()，Node.js 用 new URL()）
• 协议必须白名单控制（禁用 javascript:、data:、vbscript: 等危险协议）
• 域名建议白名单（如只允许 .mycompany.com），或黑名单已知恶意域名
• 对 URL 中的路径、查询参数做必要解码后再校验，避免双编码绕过

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！