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

在过去两个月中的某个时候，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~!$%^&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>

Answer 2

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

我的简单解决方案是，在将正则表达式应用于输入的pattern属性之前，先对其进行url编码。这似乎可以满足HTML5引擎的要求，并且可以正常工作。 JavaScript的encodeURIComponent很合适。

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

2 个答案: