html5 仅校验协议+主机的基本语法结构，如必须以 http:// 或 https:// 开头且主机名非空，不检查可访问性；不同浏览器实现有差异，需用 new url() 前端补充校验并服务端二次验证。
HTML5 <input type="url"> 的校验逻辑是什么
HTML5 原生的 url 类型并不校验 URL 是否真实可访问，只检查是否符合基本语法结构。比如 http://example 会被接受，但 example.com（缺协议）会被拒绝；https:// 单独存在也会失败——因为缺少主机名。
浏览器实际使用的正则逻辑接近：^https?://[^\s/$.?#].[^\s]*$（具体实现因引擎而异），重点在「协议 + 主机」是否成形，而非 DNS 或 HTTP 可达性。
- 必须以
http://或https://开头（部分浏览器也接受ftp://） - 主机名不能为空，且不能仅由标点或空格组成
- 路径、查询参数、锚点都是可选的，不影响通过校验
-
mailto:hello@example.com不被type="url"接受，它属于type="email"或自定义处理范围
为什么 <input type="url"> 在表单提交时仍可能出错
用户绕过前端校验的方式很多：禁用 JS、手动修改 DOM、用 curl/postman 提交、甚至浏览器开发者工具直接改 type 属性为 text 后输入非法值。此时原生校验完全失效。
更关键的是，不同浏览器对 url 的宽松程度不一致。例如 Safari 对 https://localhost:3000 支持良好，但旧版 Firefox 可能拒绝带端口的本地地址；Chrome 允许 http://127.0.0.1，但某些移动端 WebView 会报错。
立即学习“前端免费学习笔记（深入）”；
- 永远不要依赖
type="url"做服务端校验依据 - 若后端收到
https://foo这类明显残缺的 URL，说明前端未做兜底或用户篡改了输入 - 移动端软键盘的「URL 键盘」（带
.com快捷键）只响应type="url"，但它不保证内容合法
如何用 JavaScript 补充校验并给出友好提示
原生校验只显示浏览器默认气泡提示（如“请填写一个有效的 URL”），无法定制文案或触发业务逻辑。用 checkValidity() + setCustomValidity() 可接管控制权。
const urlInput = document.querySelector('input[type="url"]');
urlInput.addEventListener('input', () => {
const value = urlInput.value.trim();
if (!value) return;
try {
// 尝试构造 URL 实例，捕获语法错误
new URL(value);
urlInput.setCustomValidity('');
} catch (e) {
urlInput.setCustomValidity('请输入完整 URL，例如 https://example.com');
}
});
注意：new URL() 要求字符串含协议，所以 example.com 会失败。如需支持无协议输入，可先预补 https:// 再尝试解析，但务必在提交前还原原始值，避免误提交。
-
new URL()是目前最可靠的客户端语法校验方式，比正则更准确（它遵循 WHATWG URL 标准） - 不要在
submit事件里才校验——用户应在输入过程中就得到反馈 - 若需兼容 IE，得降级为正则匹配，但正则难以覆盖所有合法 URL 边界情况（如国际化域名 IDN）
服务端必须重做 URL 校验，且不能只靠 filter_var($url, FILTER_VALIDATE_URL)
PHP 的 FILTER_VALIDATE_URL 默认允许 javascript:、data: 等危险协议，且对空主机、多余斜杠容忍度过高。Node.js 的 url.parse()（旧 API）已废弃，应使用 new URL() 并捕获异常。
try {
const url = new URL(req.body.target_url);
// 白名单协议检查
if (!['http:', 'https:'].includes(url.protocol)) {
throw new Error('不支持的协议');
}
// 可选：禁止 localhost / 内网 IP（防止 SSRF）
if (isLocalhostOrPrivateIP(url.hostname)) {
throw new Error('禁止访问本地或内网地址');
}
} catch (err) {
res.status(400).json({ error: '无效的 URL' });
}
真正容易被忽略的是：URL 编码问题。用户输入 https://exa mple.com（含空格）经浏览器自动编码为 https://exa%20mple.com，服务端若未解码再校验，new URL() 会直接抛错。务必先 decodeURIComponent()（注意只对外部输入的 path/query 部分做，不要对整个 URL 字符串乱解码）。
