我的HTML具有以下输入元素(它旨在接受以“.com”结尾的电子邮件地址):
<input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" 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})?$" 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不喜欢。我有什么错误的语法?
使用
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~!$%^&*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&*_=+}{'?]+)*@([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>
我的应用程序遇到了同样的问题,但解决方案的方法略有不同。我的正则表达式具有与接受的答案描述的相同的问题(特殊字符在不需要时在字符类中被转义),但是我正在处理的正则表达式来自外部源,因此我无法修改它。这种正则表达式通常适用于大多数语言(在PHP中通过验证),但正如我们发现它打破了HTML5。
我的简单解决方案是,在将正则表达式应用于输入的pattern
属性之前对其进行编码。这似乎满足HTML5引擎,它按预期工作。 JavaScript的encodeURIComponent
非常合适。