pattern 属性在电子邮件类型字段中不能正常工作
pattern attribute does not work well in e-mail type field
我需要 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ñÑ.!#$%&'*+\/=?^_`{|}~-]+@[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 似乎无法识别该属性。
有办法吗？
谢谢
海梅
验证international email addresses。我建议使用带有模式的 text 字段。
一位 similar question 的回答建议使用更通用的解决方案，我同意。
<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />
It checks if email contains at least one character (also number or
whatever except another "@" or whitespace) before "@", at least two
characters (or whatever except another "@" or whitespace) after "@"
and one dot in between. This pattern does not accept addresses like
lol@company, sometimes used in internal networks. But this one could
be used, if required:
<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />
Both patterns accepts also less valid emails, for example emails with
vertical tab. But for me it's good enough. Stronger checks like trying
to connect to mail-server or ping domain should happen anyway on the
server side.
我需要 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ñÑ.!#$%&'*+\/=?^_`{|}~-]+@[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 似乎无法识别该属性。
有办法吗？
谢谢 海梅
验证international email addresses。我建议使用带有模式的 text 字段。
一位 similar question 的回答建议使用更通用的解决方案，我同意。
<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />It checks if email contains at least one character (also number or whatever except another "@" or whitespace) before "@", at least two characters (or whatever except another "@" or whitespace) after "@" and one dot in between. This pattern does not accept addresses like lol@company, sometimes used in internal networks. But this one could be used, if required:
<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />Both patterns accepts also less valid emails, for example emails with vertical tab. But for me it's good enough. Stronger checks like trying to connect to mail-server or ping domain should happen anyway on the server side.