为什么我得到：“无效的正则表达式。未捕获的语法错误。无效的转义。”？

Question

我正在尝试创建一个 html 输入标记，该标记仅接受以两种格式之一输入的数字，并拒绝所有其他输入。

我只想接受这些格式的数字，包括需要破折号：

1234-12

和

1234-12-12

注意：这不是日期，而是法律章节编号

我读到的有关正则表达式的所有内容都表明以下内容应该有效，但事实并非如此。

<input class="form-control"
                       type="text"
                       pattern="^(\d{4}\-\d{2}\-\d{2})|(\d{4}\-\d{2})$"
                       required />

Chrome 中的 Devtools 控制台错误：

Pattern 属性值^(\d{4}\-\d{2}\-\d{2})|(\d{4}\-\d{2})$不是有效的正则表达式：未捕获语法错误：无效的正则表达式：/^(\d{4}-\d{2}-\d{2})|(\d{4}-\d{2 })$/: 无效转义

Answer 1

您不应该在与标志一起使用的ES6 正则表达式中的字符类之外转义连字符（当前版本的 Chrome 和 FF 的正则表达式中u默认使用的字符类）。pattern

此外，默认情况下，模式属性中的正则表达式是锚定的，删除冗余^并$使用可选组缩短模式

pattern="\d{4}-\d{2}(-\d{2})?"

HTML5pattern属性中的这个正则表达式意味着：

• \d{4}-\d{2}- 匹配 4 位数字，-，然后匹配字符串开头的 2 位数字
• (-\d{2})?- 并可选择匹配-字符串末尾的 a 和 2 位数字。