HTML表单中pattern属性不能真正校验域名，仅作提交前粗略匹配；应使用结构化正则如"(?:[a-zA-Z0-9-]{1,63}.)+[a-zA-Z]{2,}"配合type="text"和JS实时校验及后端重复验证。
HTML 页面不能直接用正则表达式“校验域名”，pattern 属性只是把正则交给浏览器做提交前的粗略匹配，它不解析、不验证 DNS、不处理国际化域名（IDN），更不会告诉你 example..com 或 -test.com 为什么错——只默默返回 false。
pattern 属性怎么写才真正匹配合法域名
必须用符合 DNS 规范的结构化正则，且避开常见字符组陷阱：
-
pattern会自动加^和$，你只需写中间部分，比如(?:[a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,} - 每个标签（点号分隔的部分）必须是
[a-zA-Z0-9-]{1,63}：开头结尾不能是-，长度 ≤63，但正则本身不检查位置，得靠结构约束 - 末尾的顶级域（TLD）必须是纯字母且 ≥2 字符：
[a-zA-Z]{2,}，不能写成[a-z]+（漏大写）或\w{2,}（允许数字） - 别用
\d或\w：旧版 Safari 和 IE 不识别，统一用[0-9]和[a-zA-Z0-9] - 示例完整写法：
pattern="(?:[a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,}"
为什么 type="url" + pattern 还是拦不住非法域名
type="url" 和 pattern 是两套独立逻辑，浏览器可能只执行其中一个，甚至互相干扰：
-
type="url"会放行http://a、https:///example.com，但拒绝www.example.com（缺协议） -
pattern在 iOS Safari 和部分 Android WebView 中常被忽略，尤其含\.或复杂量词时 - 两者并存时，Chrome 可能只触发
type="url"校验，pattern形同虚设 - 真正可靠的做法是统一用
type="text"+pattern，放弃type="url"的幻觉
必须补 JS 才算真正落地
仅靠 pattern 无法覆盖真实场景，JS 是绕不开的一环：
立即学习“前端免费学习笔记（深入）”；
- 监听
input或blur事件，调用new RegExp(pattern).test(value)做实时反馈 - 对空格敏感：用户粘贴
" example.com "会失败，务必先.trim() - 错误提示不能只靠
title：iOS Safari 不显示气泡，得用setCustomValidity("请输入合法域名") - 后端必须重复校验：前端可被禁用或篡改，PHP 用
filter_var($domain, FILTER_VALIDATE_DOMAIN, FILTER_FLAG_HOSTNAME)，Node.js 用require('url').domainToASCII()处理 IDN
最易被忽略的是「标签边界」——正则写成 [a-zA-Z0-9-]+ 看似合理，但它会匹配 abc- 或 -def，而真实 DNS 要求每个标签内部可含 -，但不能开头或结尾。这个约束只能靠结构（如 (?:...\.)*...）间接实现，没法单靠一个字符组搞定。
