input[type="url"]不可靠，仅粗略检查结构；应配合required、trim()及new url()或php filter_var()做后端校验，并按业务白名单限制域名与协议。
input[type="url"] 不能当真校验用，它只拦得住明显乱输（比如纯文字），拦不住 foo://bar、http:/ 或带空格的粘贴；真要靠谱，JS + 后端双补刀是绕不开的。
为什么 input[type="url"] 校验基本等于没校验
浏览器对它的验证逻辑极松：只要字符串里含一个 : 和至少一个 /，就放行。这意味着这些都会通过：
git://example.com-
http:/path（少了一个/） -
https://（末尾带空格，提交时自动 trim，但不报错） -
javascript:alert(1)（协议白名单完全没控制）
它不检查域名是否合法、不强制 HTTPS、不拒绝危险协议——仅结构层面“看起来像 URL”。表单提交时若依赖它防注入或跳转劫持，大概率翻车。
怎么用 maxlength 限制 URL 长度才有效
maxlength 对 type="url" 是有效的，但行为有坑：
- 只拦截键盘新增输入，不截断已存在的超长值（比如 JS 动态赋值
el.value = "a".repeat(200)，它照收） - 表单原生提交时默认不校验
maxlength，需手动调用setCustomValidity() - 移动端粘贴仍可能绕过：iOS 键盘有时禁用输入，Android 则常允许粘贴后才触发
input事件
稳妥做法是组合使用：
const urlInput = document.querySelector('input[type="url"]');
urlInput.maxLength = 2048;
urlInput.addEventListener('input', () => {
if (urlInput.value.length > urlInput.maxLength) {
urlInput.value = urlInput.value.slice(0, urlInput.maxLength);
}
});
urlInput.addEventListener('blur', () => {
urlInput.setCustomValidity(
urlInput.value.length > urlInput.maxLength
? 'URL 超过最大长度（2048 字符）'
: ''
);
});
JS 层真正可用的 URL 校验必须手动做
别信 :valid 伪类，它只反映浏览器那层宽松判断。要用 new URL() 做基础语法校验，并加业务规则：
- 先
trim()，否则" https://example.com "会抛TypeError - 捕获
new URL()异常，它比正则更准（比如能识别https://[::1]这类 IPv6） - 额外检查
url.protocol是否在白名单（如仅允许https:、http:） - 若需校验域名，用
url.hostname+ 正则（如^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*\.[a-z]{2,}$），注意国际化域名（IDN）要先 punycode 转换
示例：
function isValidUrl(str) {
try {
const url = new URL(str.trim());
return ['http:', 'https:'].includes(url.protocol);
} catch {
return false;
}
}
移动端键盘和兼容性必须双保险
type="url" 在 iOS/Android 上唤起网址键盘，但以下情况会失效：
-
readonly或disabled状态下，iOS Safari 直接退化为普通键盘 - 旧版 Android WebView（尤其系统级 WebView）可能完全忽略
type="url" - 部分国产浏览器（QQ、UC）对
type="url"支持不一致
解决方案是加 inputmode="url" 属性，它是更底层的软键盘提示，兼容性更好：
<input type="url" inputmode="url" placeholder="https://">
注意：inputmode 不提供任何校验能力，只影响键盘类型；它和 type="url" 是互补关系，不是替代关系。
最易被忽略的一点：URL 中的中文、空格、特殊符号在提交时会被自动编码（如 你 → %E4%BD%A0），后端若直接存或重定向，必须用 decodeURIComponent() 解码，否则拿到的是乱码或不可用链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
