Невозможно получить входной шаблон регулярного выражения в type = "email" для правильной работы

Question

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

const match = (email) => /^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1@(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/i.test(email);
  
console.log(match('email@email.com'))
console.log(match('.22@email.com'))
console.log(match('@.com'))

Я пытался использовать опору HTML pattern для проверки этого шаблона, но, похоже, не могу заставить его работать правильно.

Я попробовал тот же шаблон, но не могу заставить его работать. Я также попытался удалить шаблон регулярных выражений.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" pattern='/^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1@(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/'>
  <input type="submit">
</form>

В настоящее время любой адрес электронной почты приводит к неправильному совпадению с образцом. Нужно ли по-разному форматировать шаблон регулярных выражений для поддержки этого?

Answer 1

Во-первых, вы должны использовать type="text". В противном случае проверка электронной почты будет выполняться с помощью встроенного регулярного выражения. Во-вторых, pattern='/^...$/' необходимо «преобразовать» в pattern='...', так как нет необходимости в косых чертах на обоих концах и нет необходимости в якорях, шаблон привязывается по умолчанию.

Используется

<input type="text" id="email" name="email" pattern='("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1@(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>

Если вам нужно сделать это без учета регистра, добавьте a-z к классам символов, учитывая, что [A-Za-z0-9_] = \w:

<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1@(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>

JS demo:

input:valid {
  color: black;
}
input:invalid {
  color: red;
}

<form>
<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1@(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))' title="Please enter the right email address." />
<input type="Submit" />
</form>