模式属性在电子邮件类型字段中效果不佳

Question

我需要 HTML5 中的电子邮件类型字段来验证还包含字母 ñ 和 Ñ 的电子邮件，所以我创建了这个输入字段：

<input autocomplete="off" class="form-control" 
data-val="true" data-val-email="El E-mail ingresado es incorrecto." 
data-val-length="El E-mail debe tener como máximo 80 caracteres." 
data-val-length-max="80" data-val-required="El campo E-mail es obligatorio." 
id="Email" name="Email" 
pattern="^[a-zA-Z0-9ñÑ.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$" 
placeholder="E-mail" required="required" type="email" 
value="kacuña@domain.com">

测试地址是 kacuña@domain.com。

如果我在 https://regex101.com/ 中测试该正则表达式，它可以工作，但不能在 Chrome 中。 Chrome 似乎无法识别该属性。

有没有办法做到这一点？

谢谢 詹姆

Answer 1

验证international email addresses。我建议使用带有模式的 text 字段。

similar question 的回答建议使用更通用的解决方案，我同意。

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

它检查电子邮件是否包含至少一个字符（也包括数字或 除了“@”之前的另一个“@”或空格），至少两个 “@”之后的字符（或除另一个“@”或空格之外的其他字符） 和一个点之间。这种模式不接受像这样的地址 lol@company，有时用于内部网络。但是这个可以 如果需要，可以使用：

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

两种模式也接受不太有效的电子邮件，例如带有 垂直选项卡。但对我来说已经足够好了。更强的检查，比如尝试 无论如何，连接到邮件服务器或 ping 域都应该发生在 服务器端。