regex HTML输入模式属性无法验证某些正则表达式

7xllpg7q  于 2023-06-30  发布在  其他
关注(0)|答案(3)|浏览(110)

我有一个电子邮件类型的输入,其中有一个电子邮件验证模式属性设置,似乎没有按预期触发。

<form>
  <input type="email" placeholder="enter your email" pattern="[A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required>
  <button>submit</button>
</form>

有点奇怪因为它的一部分工作。正则表达式exp应该只在一些文本和一个点之后匹配,并且在@符号之后再次添加一些文本。但是也匹配,而不是在someText@sometext模式之后没有点和字符。我已经在一些在线工具上测试过了,比如regextester,效果很好。

k4ymrczo

k4ymrczo1#

根据文档:
如果指定的模式未指定或无效,则不应用正则表达式,并且完全忽略此属性。
<input type="email">| MDN
指定的模式使用the u flag编译,这可以防止无意义的转义。你的有一个:\';只需删除反斜杠即可使模式有效。
另外,最后一个$是不必要的,因为HTML默认会添加它,就像^一样。
试试看:

input:invalid {
  outline: 1px solid red;
}
<form>
  <input
    type="email"
    placeholder="enter your email"
    pattern="[A-Za-z0-9._+\-']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}"
    value="someText@sometext"
    required
  >
  <button>submit</button>
</form>
eivgtgni

eivgtgni2#

有趣的问题,因为没有太多类似的报告。
下面是来自 DevTools 的控制台日志。

12:13:04.218 example.html:1 Pattern attribute value [A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$/v: Invalid escape
  • MDN – Regular Expressions – Character class*。
  • "...除了]\之外,如果以下字符表示文字字符,则它们必须在字符类中进行转义:()[{}/-|。此列表有点类似于语法字符列表,除了^$*+?未保留在字符类中..."*

因此,省略号'不需要转义。

[A-Za-z0-9._+\-']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$
mklgxw1f

mklgxw1f3#

试试这个:在模式前添加^

<form>
  <input type="email" placeholder="enter your email" pattern="^[A-Za-z0- 9._+\-']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required>
  <button>submit</button>
</form>

相关问题