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

问题描述 投票:2回答:2

我的HTML具有以下输入元素(它旨在接受以“.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">

在过去两个月的某个时间点,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})?$不是有效的正则表达式:Uncaught SyntaxError:无效的正则表达式:/[\-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喜欢正则表达式,但Chrome不喜欢。我有什么错误的语法?

regex html5 google-chrome
2个回答
2
投票

使用

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引擎将整个模式包装在^(?:)$构造中,因此不需要在模式的末尾使用$字符串锚点结束。

测试:

<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
投票

我的应用程序遇到了同样的问题,但解决方案的方法略有不同。我的正则表达式具有与接受的答案描述的相同的问题(特殊字符在不需要时在字符类中被转义),但是我正在处理的正则表达式来自外部源,因此我无法修改它。这种正则表达式通常适用于大多数语言(在PHP中通过验证),但正如我们发现它打破了HTML5。

我的简单解决方案是,在将正则表达式应用于输入的pattern属性之前对其进行编码。这似乎满足HTML5引擎,它按预期工作。 JavaScript的encodeURIComponent非常合适。

© www.soinside.com 2019 - 2024. All rights reserved.