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

Question

我想客户端验证表单输入(用户名+密码)之前发送到服务器(php)。因此，我在输入标记中应用了pattern属性。我想出了一个RegEx表达式来完成服务器端的工作:

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

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

现在我想在HTML表单中的pattern属性中实现相同的RegEx。HTML标准定义了pattern属性中的RegEx跟随JavaScript中的RegEx，将表达式分为"pattern， " flag;用逗号分隔。我将把它翻译成这样的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属性regex时，您应该注意以下几点:

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

所以，你只需要

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

注意在JavaScript regex中[A-Za-z0-9_]=w。