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

Question

我想在将表单输入（用户名+密码）发送到服务器（php）之前对客户端进行验证。\n因此我在输入标记中应用了模式属性。\n我想出了一个在服务器上执行此操作的 RegEx 表达式边：

\n

(preg_match_all(\'/^[a-zA-Z0-9. _\xc3\xa4\xc3\xb6\xc3\xbc\xc3\x9f\xc3\x84\xc3\x96\xc3\x9c@-]{1,50}$/\', $_POST[\'username\']) == 0)\n

\n

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

\n

现在我想在 HTML 表单中的模式属性中实现相同的正则表达式。\n HTML 标准定义模式属性中的正则表达式遵循JavaScript中的正则表达式，它将表达式划分为用逗号分隔的“模式、标志”。我会把它翻译成 HTML，如下所示：

\n

pattern="^[a-zA-Z0-9. _\xc3\xa4\xc3\xb6\xc3\xbc\xc3\x9f\xc3\x84\xc3\x96\xc3\x9c@-]{1,50}$,g"\n

\n

那是行不通的。

\n

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

\n

/^[a-zA-Z0-9. _\xc3\xa4\xc3\xb6\xc3\xbc\xc3\x9f\xc3\x84\xc3\x96\xc3\x9c@-]{1,50}$/\n

\n

并说，全局标志将位于最后一个斜杠后面：

\n

pattern="/^[a-zA-Z0-9. _\xc3\xa4\xc3\xb6\xc3\xbc\xc3\x9f\xc3\x84\xc3\x96\xc3\x9c@-]{1,50}$/g"\n

\n

这也行不通。

\n

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

\n

\n

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

\n

\n

那么，如何将全局标志获取到输入元素的模式属性中呢？

\n

Answer 1

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

\n

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

\n

所以，你所需要的只是

\n

pattern="^[a-zA-Z0-9. _\xc3\xa4\xc3\xb6\xc3\xbc\xc3\x9f\xc3\x84\xc3\x96\xc3\x9c@-]{1,50}"\n// Or even\npattern="^[\\w. \xc3\xa4\xc3\xb6\xc3\xbc\xc3\x9f\xc3\x84\xc3\x96\xc3\x9c@-]{1,50}"\n

\n

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

\n