先记住这个答案
浏览器对 type="url" 的校验规则很简单：值必须是一个带协议头的绝对 URL。用户输入 example.com 提交时会被拦截，必须写成 https://example.com 才行。这个校验由约束验证 API 完成，不合法时 validity.typeMismatch 变成 true，浏览器会弹出默认提示框。
- 值必须是带协议头的绝对 URL
typeMismatch标记 URL 格式错误pattern可进一步限制域名或路径格式- 非
required时空值也能通过校验
什么样的值能通过校验
合法值必须是一个格式正确的绝对 URL，通常有协议名和后续地址。只输入 example.com 不够；只写 https:// 也没有主机地址，不能把它当作可用网址。浏览器负责基础语法校验，但不保证地址存在或安全。
<form id="demo">
<input type="url" id="link" required />
<button type="submit">提交</button>
</form>
<script>
const input = document.getElementById('link')
input.addEventListener('input', () => {
// 输入 example.com 时可观察到 true
console.log(input.validity.typeMismatch)
})
document.getElementById('demo').addEventListener('submit', event => {
event.preventDefault() // 仅供页面演示，不发请求
})
</script>需要注意的是，type="url" 不要求值是一个真正能访问的地址。https://abc 也能通过，因为从格式上它是合法的。浏览器做的是格式校验，不是连通性检查。
如果字段没有加 required，空值也能通过校验。只有填了内容，格式校验才会生效。
用 pattern 进一步收窄范围
内置校验只管「是不是合法 URL」，不管用户填的是你想要的 URL。比如你只想接受 https 开头的地址，或者只允许某个域名下的链接，就需要加 pattern。
<input
type="url"
pattern="https://.*"
title="请输入 https 开头的地址"
required
/>
<!-- 输入 http://example.com 会被 pattern 拦截 -->
<!-- 输入 https://example.com 才能通过 -->内置的 URL 格式约束和 pattern 约束都必须满足，表单才能正常提交。不匹配时可读取 validity.patternMismatch；浏览器可能使用 title 帮助组成提示文案，但不能保证各环境的提示相同，重要规则应另有可见说明。
容易答错的地方
- 以为手机端一定显示同一种提示
- 校验气泡的外观和文字会因浏览器而异，不能把桌面截图当成所有移动端的效果。无论浏览器怎样提示，后端都必须再验证一次，因为请求可以绕过页面直接发送。
- 以为不安全的协议会被拦
javascript:、data:这类协议头也能通过type="url"的校验。浏览器只检查格式，不判断安全性。如果你的场景需要过滤掉这些协议，得用pattern或 JavaScript 逻辑自己处理。
面试官还会怎么问？
type="url" 和 type="text" 加 pattern 有什么区别？
type="url" 自带一层格式校验，移动端还会弹出带 .com 按钮的键盘。用 type="text" 加 pattern 也能实现同样的校验效果，但少了语义信息和移动端键盘优化。能用原生类型就用原生类型。
怎么拿到浏览器弹出的校验提示文案？
读 input.validationMessage 属性就行。这个属性返回浏览器当前要展示的校验提示字符串，格式和语言跟用户的浏览器设置有关，不同浏览器返回的文案不一样。
想自己控制错误提示的样式怎么做？
不要等到 submit 事件里才检查：表单无效时，浏览器会先拦住提交，submit 监听器根本不会运行。可以监听输入变化，或在自定义提交按钮的点击处理中调用 checkValidity()；读取 validity.typeMismatch、patternMismatch 等标志后展示自己的提示。若希望浏览器同时显示原生提示，再调用 reportValidity()。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。