regex 模式属性值不是有效的正则表达式

qqrboqgw 于 2023-03-04 发布在其他

关注(0)|答案(3)|浏览(128)

My HTML包含以下input元素（它旨在接受以."com"结尾的电子邮件地址）：

<input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[\-a-zA-Z0-9~!$%\^&amp;*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&amp;*_=+}{\'?]+)*@([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$" maxlength="64">

在过去2个月的某个时间点，Chrome在验证该输入时开始返回以下JavaScript错误（并阻止提交父表单）：
模式属性值[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*@([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$不是有效的正则表达式：未捕获的语法错误：无效的正则表达式：/[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*@([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$/：转义无效
Regex101.com喜欢regex模式，但Chrome不喜欢。我的语法哪里出错了？

regex

来源：https://stackoverflow.com/questions/51865098/pattern-attribute-value-is-not-a-valid-regular-expression

3条答案

按热度按时间

46scxncf1#

用途

pattern="[-a-zA-Z0-9~!$%^&amp;*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&amp;*_=+}{'?]+)*@([a-zA-Z0-9_][-a-zA-Z0-9_]*(\.[-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?"

问题是一些不应该转义的字符被转义了，比如字符类中的'和^。注意，字符类中的-可以被转义，但在它的开头时不必转义。
还要注意，HTML5引擎将整个模式 Package 在^(?:和)$构造中，因此不需要在模式末尾使用$字符串末尾锚。
试验：

<form>
   <input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[-a-zA-Z0-9~!$%^&amp;*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&amp;*_=+}{'?]+)*@([a-zA-Z0-9_][-a-zA-Z0-9_]*(\.[-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?" maxlength="64">
   <input type="Submit">
</form>

赞(0）回复(0）举报 2023-03-04

zujrkrfu2#

我的应用程序也遇到了同样的问题，但解决方法略有不同。我的正则表达式也存在公认答案所描述的问题（特殊字符在不需要时在字符类中转义），但是我正在处理的正则表达式来自外部源，所以我不能修改它。这种正则表达式通常适用于大多数语言（通过PHP验证），但我们发现它与HTML5不兼容。
我的简单解决方案是，url在将正则表达式应用于输入的pattern属性之前对其进行编码。这似乎满足了HTML5引擎的要求，并且可以按预期工作。JavaScript的encodeURIComponent非常适合。

赞(0）回复(0）举报 2023-03-04

dxpyg8gm3#

我有一个简单的正则表达式，在Chrome中出现了这个错误。原来是我有一个空间太多：
失败：[0-9a-fA-F]{0, 32}
成功：[0-9a-fA-F]{0,32}

赞(0）回复(0）举报 2023-03-04