pattern对url类型生效，但浏览器优先执行内置URL校验并可能弱化pattern作用；需配合required、title及表单提交触发，且正则须省略^$、正确处理特殊字符。
pattern 属性对 url 类型是否生效
不生效。pattern 仅对 text、search、tel、url、email、password 六种 type 生效，但注意：type="url" 虽然被列在支持列表里，浏览器会优先执行其内置 URL 校验（如必须含 : 和 //），而忽略你写的 pattern —— 实测 Chrome/Firefox/Safari 均如此。想用正则控格式，得换 type="text"。
写什么正则才能匹配合法网址（含点号、连字符、子域名）
不能直接抄 JS 正则字面量，比如 /^https?:\/\/.+\..+$/ 会静默失效。浏览器自动加 ^ 和 $，你只需提供核心模式，且要兼容真实域名规则：
-
pattern="https?://[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$"太重，实际没必要； - 更实用的是宽松但防错：
pattern="https?://[^\s/]+(\.[^\s/]+)+(/[^\s]*)?"—— 允许https://sub.domain.co.uk/path，拒绝空格、连续点、开头点； - 若只要求“看起来像网址”，用
pattern="https?://.+\..+"即可，但注意.在pattern中无需转义，写成\.反而错； - 连字符
-出现在域名中时，必须放在字符类[]的开头或结尾，例如[a-z0-9-]✅，[a-z-0-9]❌（会被解析为非法范围）。
为什么写了 pattern 却没提示？关键三要素缺一不可
pattern 是个“被动校验器”，不配齐以下三项，它就等于没写：
- 必须加
required：否则空值直接通过，哪怕正则再严； - 必须设
title：失败时唯一可见提示来源，title="请输入以 https:// 或 http:// 开头的网址"比默认文案有用十倍； - 必须触发提交或调用
reportValidity()：它不监听input，只在submit或显式调用时检查。
移动端和 Safari 的兼容性坑
iOS Safari 对 pattern 支持较弱，尤其遇到 Unicode 或复杂嵌套时容易跳过校验。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
type="text"+inputmode="url"唤起 URL 键盘，同时保留pattern； - 在
submit事件中用 JS 补一层test()校验，避免 Safari 静默放行； - 别依赖
pattern做安全拦截——后端必须重复验证，且不能只看协议头，要真正解析 URL 结构（比如用 Node.js 的new URL()或 Python 的urllib.parse）。
真正难的不是写出能匹配的正则，而是让不同浏览器在不同输入时机下都给出一致反馈。pattern 只负责“格式骨架”，细节容错、实时提示、跨字段联动，全得靠 JS 接手。
