html5 的 input[type="url"] 不强制要求 http/https 前缀，仅校验 url 语法结构；需用 javascript 结合 trim()、url.canparse() 或 new url() 校验协议，并调用 setcustomvalidity() 提示，提交前须 checkvalidity() 和服务端双重验证。
HTML5 的 input[type="url"] 本身**不强制要求 http 或 https 前缀**，它接受任何合法协议（如 ftp://、file:///、data:），甚至允许拼写错误但结构“看似合规”的协议（如 htp://）。所以仅靠 type="url" 无法可靠拦截“缺 http/https”的输入。真正实现该目标，需在保留原生语义的基础上，用 JavaScript 主动干预校验逻辑。
为什么 type="url" 拦不住缺 http/https 的网址
浏览器对 type="url" 的校验只检查是否符合 WHATWG URL 标准的语法结构，不要求协议是常用或安全的：
-
ftp://files.org、file:///home/a.txt都会通过，哪怕业务只接受 https -
htp://example.com（少一个t）可能被 Chrome 拒绝，但 Firefox 或旧版 Safari 可能放行 -
www.example.com或example.com/path一定失败——因为它们不是绝对 URL，缺协议头 - 用户粘贴
https://a.com（首尾空格）会被静默截断，但不会触发报错提示
用 JS 强制要求 http/https 协议头
监听输入事件，在提交前验证协议是否为 http: 或 https:，并给出明确反馈：
- 先对值执行
.trim()，避免空格干扰 - 用
URL.canParse(url)快速初筛（现代浏览器支持）；不支持时降级为try { new URL(url); } - 解析成功后，读取
urlObj.protocol，判断是否等于"http:"或"https:" - 不满足则调用
input.setCustomValidity("请以 http:// 或 https:// 开头") - 在
input或blur事件中清空自定义错误：input.setCustomValidity("")
表单提交时必须兜底再校验
即使加了 JS 校验，也要防止绕过（如禁用 JS、直接调用 form.submit()）：
- 提交前手动调用
input.checkValidity() - 若返回
false，立即调用input.reportValidity()弹出提示 - 不要直接取
input.value发送，先确认input.validity.valid === true - 服务端必须独立校验：同样
trim()后用语言内置 URL 解析器（如 Python 的urllib.parse.urlparse或 Node.js 的new URL()）验证协议
更友好的替代方案：text + 自动补协议
如果业务上允许用户输入 github.com 并自动补成 https://github.com，可改用 type="text"：
- 设置
pattern="https?://.*"提供轻量提示（注意 pattern 不会阻止提交，仅辅助） - 提交前判断：
if (!url.startsWith('http')) url = 'https://' + url - 补完后仍需走
new URL()校验，避免重复添加（如https://https://） - 这种体验比硬性报错更平滑，适合面向普通用户的表单
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
