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

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 错误(并阻止提交父表单):

Pattern attribute value [\-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})?$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[\-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})?$/: Invalid escape

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

测试:

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