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

Question

我想让客户端在将表单输入(用户名+密码)发送到服务器(php)之前验证它。 因此，我在输入标签中应用了 pattern 属性。 我想出了一个在服务器端完成工作的 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 , 它将表达式分为以逗号分隔的“pattern, flags”。我会像这样将其翻译成 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在他们的开发人员指南中也指出(我也在其他地方读过):

No forward slashes should be specified around the pattern text.

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

Answer 1

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

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

所以，你只需要

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

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