HTML 的 pattern 属性自2023年4月起默认启用 JavaScript v（Unicode Sets）标志，导致未转义的连字符 - 在字符类中（如 [s-]）引发语法错误，使整个正则失效——浏览器静默忽略该 pattern，输入始终视为有效。
html 的 `pattern` 属性自2023年4月起默认启用 javascript `v`（unicode sets）标志，导致未转义的连字符 `-` 在字符类中（如 `[s-]`）引发语法错误，使整个正则失效——浏览器静默忽略该 pattern，输入始终视为有效。
在 HTML 表单验证中， 元素的 pattern 属性看似与普通 JavaScript 正则一致，实则遵循严格且演进中的规范。关键变化在于：自 2023 年 4 月 WHATWG HTML 标准更新后，pattern 值不再使用 u（Unicode）标志编译，而是统一采用 v（Unicode Sets）标志。这一变更虽提升了正则能力（支持 p{...}、集合运算 --、q{...} 等高级特性），却引入了一项重要限制：在 v 模式下，字符类 [...] 中所有具有特殊含义的符号（包括 -、[、]、、| 等）必须显式转义，即使它们位于字符类边界位置（如 [a-] 或 [s-]）也不再被容忍。
这正是你遇到问题的根本原因：
<!-- ❌ 失效：[s-] 中的 - 未转义，v 模式下语法错误 -->
<input pattern="^d{10}$|^((d{3})s*)?d{3}[s-]?d{4}$">当浏览器尝试用 RegExp(pattern, 'v') 编译该字符串时，[s-] 会抛出 SyntaxError（例如 Invalid character in character class）。根据 HTML 规范，此时 pattern 被视为“未编译”，输入框将完全跳过客户端验证——validity.valid 恒为 true，任何输入（包括空值、字母、超长数字）都被接受，造成“看似不生效”的假象。
✅ 正确写法是对连字符进行转义：
立即学习“前端免费学习笔记（深入）”；
<!-- ✅ 修复：[s-] 显式转义 - -->
<input
name="custPhone"
id="phone"
type="tel"
placeholder="(nnn) nnn-nnnn"
pattern="^d{10}$|^((d{3})s*)?d{3}[s-]?d{4}$"
required
>? 验证提示：可添加简易样式直观反馈验证状态
input:invalid { border: 2px solid #e74c3c; } input:valid { border: 2px solid #2ecc71; }
⚠️ 注意事项：
- 不止 -，所有 v 模式保留字符均需转义：若 pattern 中含 [(]、[|]、[\] 等，也必须写作 (、|、\；
- 锚点自动添加：HTML 规范会自动为 pattern 添加 ^(?:...) 和 $，因此无需（且不应）在 pattern 字符串中重复书写 ^ 和 $——但当前示例因历史兼容性仍可工作，建议保持以明确意图；
- 回退兼容性：旧版浏览器（Chrome 务必转义以保证跨版本一致性；
- 调试技巧：在控制台执行 new RegExp('[\s-]', 'v') 可快速验证 pattern 是否合法（成功返回 RegExp 对象即有效）。
总结：HTML pattern 不是“原生正则字符串”，而是受标准约束的特定编译流程。面对 v 模式的严格性，将字符类中的 - 统一替换为 – 是最直接、可靠且向后兼容的修复方式。这一微小改动，即可让电话号码验证重获预期行为：仅接受 1234567（7位）、1234567890（10位）、(123) 456-7890 等合规格式，拒绝 123456（6位）、12345678（8位）等非法输入。
