атрибут шаблона не работает в поле типа электронной почты

Question

Мне нужно поле типа e-mail в 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

Для проверки международных адресов электронной почты . Вместо этого я бы предложил использовать поле text с шаблоном.

Ответ от аналогичного вопроса предлагает использовать более общее решение, и я согласен.

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

Он проверяет, содержит ли электронная почта хотя бы один символ (также число или что-либо, кроме другого "@" или пробела) перед "@", минимум два символа (или любой другой, кроме другого "@" или пробела) после "@""и одна точка между ними. Этот шаблон не принимает адреса, подобные lol @ company, иногда используемые во внутренних сетях. Но этот может быть использован, если требуется:

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

Оба шаблона принимают также менее действительные электронные письма, например электронные письма с вертикальной вкладкой. Но для меня это достаточно хорошо. Более строгие проверки, такие как попытка подключения к почтовому серверу или домену ping, должны произойти в любом случае на стороне сервера.