如何在输入元素的 HTML 模式属性中设置 RegEx 全局标志？

Question

我想在发送到服务器 (php) 之前验证表单输入（用户名 + 密码）。 因此我在输入标签中应用了模式属性。 我想出了一个在服务器端完成这项工作的 RegEx 表达式：

(preg_match_all('/^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$/', $_POST['username']) == 0)

因此使用 preg_match_all（而不是 preg_match）设置全局标志。

现在我想在 HTML 表单的模式属性中实现相同的 RegEx。 HTML standard 定义模式属性中的 RegEx 遵循 JavaScript 中的 RegEx，它将表达式划分为用逗号分隔的“模式、标志”。我会把它翻译成这样的 HTML：

pattern="^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$,g"

这行不通。

我发现的所有 JavaScript RegEx 验证器都将模式括在斜杠中：

/^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$/

说，全局标志将在最后一个斜线后面：

pattern="/^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$/g"

这也不行。

Mozilla 在他们的开发者指南中也有说明（我也在其他地方读过）：

不应在模式文本周围指定正斜杠。

那么，如何才能将全局标志放入输入元素的模式属性中呢？

Answer 1

在使用pattern 属性正则表达式时，您应该注意几个事实：

• 不需要使用g标志，整个字符串必须匹配正则表达式，并且正则表达式检查只会执行一次，单个匹配就足够了
• 无需使用正则表达式分隔符包装模式，如果在开头和结尾添加斜杠，它们将被视为构成正则表达式模式一部分的文字斜杠，并且在 99.9% 的情况下会破坏正则表达式
• 您甚至不需要^ 和$ 锚点，因为pattern 正则表达式必须匹配整个字符串输入。事实上，模式是automatically enclosed 与^(?: 和)$，所以如果你使用pattern="^\d+$"（只是一个简单的例子），最终的正则表达式（在Chrome 中，例如）看起来像/^(?:^\d+$)$/u，看起来相当多余。

所以，你只需要

pattern="^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}"
// Or even
pattern="^[\w. äöüßÄÖÜ@-]{1,50}"

请注意，JavaScript 正则表达式中的 [A-Za-z0-9_] = \w。