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

Question

我的 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">

在过去 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})?$ 不是有效的正则表达式：未捕获的 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 不喜欢。我有什么语法错误？

Answer 1

使用

pattern="[-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})?"

问题是一些不应该被转义的字符被转义了，比如字符类中的' 和^。请注意，字符类中的- 可以转义，但在其开始时不必转义。

还请注意，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>

Answer 2

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

我的简单解决方案是对正则表达式进行 url 编码，然后再将其应用于输入的 pattern 属性。这似乎满足了 HTML5 引擎，并且按预期工作。 JavaScript 的 encodeURIComponent 非常合适。