[英]How to set RegEx global flag in HTML pattern attribute of the input element?
I want to client validate a form input (username + password) before sending it to the server (php).我想在将表单输入(用户名+密码)发送到服务器(php)之前验证它。 Therefore I applied the pattern attribute in the input tag.
因此我在输入标签中应用了模式属性。 I came up with a RegEx expression that does the job on the server side:
我想出了一个在服务器端完成这项工作的 RegEx 表达式:
(preg_match_all('/^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$/', $_POST['username']) == 0)
thereby the global flag is set using preg_match_all (instead of preg_match).因此使用 preg_match_all(而不是 preg_match)设置全局标志。
Now I wanted to implement the same RegEx in my pattern attribute in the HTML form.现在我想在 HTML 表单中的模式属性中实现相同的 RegEx。 HTML standard defines that RegEx in the pattern attribute follows RegEx in JavaScript , which devides the expression into "pattern, flags" divided by a comma.
HTML 标准定义模式属性中的 RegEx 遵循JavaScript中的 RegEx,它将表达式划分为用逗号分隔的“模式、标志”。 I would translate that into HTML like this:
我会将其翻译成 HTML ,如下所示:
pattern="^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$,g"
That doesn't work.那是行不通的。
All JavaScript RegEx validators I have found enclose the pattern into slashes:我发现的所有 JavaScript 正则表达式验证器都将模式括在斜杠中:
/^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$/
and say, that the global flag would be behind the last slash:并说,全球标志将在最后一个斜线后面:
pattern="/^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}$/g"
That doesn't work either.那也行不通。
Mozilla also states in their developer guide (I also read it elsewhere): Mozilla还在他们的开发者指南中声明(我也在其他地方读过):
No forward slashes should be specified around the pattern text.
不应在模式文本周围指定正斜杠。
So, how can I get the global flag into the pattern attribute of the input element?那么,如何才能将全局标志放入输入元素的模式属性中呢?
There are a couple of facts you should be aware when using pattern
attribute regex:使用
pattern
属性正则表达式时,您应该注意几个事实:
g
flag, the whole string must match the regex, and the regex check will only be performed once, a single match is enoughg
标志,整个字符串必须匹配正则表达式,并且正则表达式检查只会执行一次,单个匹配就足够了^
and $
anchors as the pattern
regex must match the entire string input.^
和$
锚,因为pattern
正则表达式必须匹配整个字符串输入。 In fact, the pattern is automatically enclosed with ^(?:
and )$
, so if you use pattern="^\d+$"
(just a quick example), the final regex (in Chrome, eg) will look like /^(?:^\d+$)$/u
, which looks rather redundant.^(?:
和)$
括起来,所以如果你使用pattern="^\d+$"
(只是一个简单的例子),最终的正则表达式(在 Chrome 中,例如)看起来像/^(?:^\d+$)$/u
,这看起来相当多余。 So, all you need is所以,你只需要
pattern="^[a-zA-Z0-9. _äöüßÄÖÜ@-]{1,50}"
// Or even
pattern="^[\w. äöüßÄÖÜ@-]{1,50}"
Note that [A-Za-z0-9_]
= \w
in JavaScript regex.请注意
[A-Za-z0-9_]
= \w
在 JavaScript 正则表达式中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.