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

Question

我正在尝试创建一个 html 输入标记，它只接受以 2 种格式中的 1 种格式输入的数字，并拒绝所有其他输入。

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

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 控制台错误：

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

Answer 1

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

另外，模式属性中的正则表达式默认锚定，删除多余的^和$并使用可选组缩短模式

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

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

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