Проверка шаблона HTML5 игнорируется

Question

У меня есть поле ввода электронной почты, у меня есть регулярное выражение ^[^@]+@[^@.]+.[^@]+$, но при запуске он не требует .com.

Перейдите на страницу https://jsfiddle.net/uscktx9d/ и введите www @ www и нажмите отправить. Это должно привести к отказу, но это не так. Как вы можете видеть здесь https://regex101.com/r/pB6iF4/1, регулярное выражение должно быть обязательным .com.

Почему мой HTML5 не требует этого?

Answer 1

Если вы собираетесь использовать проверку ввода HTML5 для электронной почты, используйте type email. Это приведет к проверке подлинности HTML5 для электронных писем и добавит преимущества (например, отображение символа @ на виртуальных клавиатурах мобильных устройств).

Кроме того, помните, что любая проверка интерфейса должна быть повторно проверена на бэкэнд.

Чтобы ответить на ваш вопрос, вам нужно избежать . с обратной косой чертой.

Answer 2

В регулярном выражении буквальная точка должна быть объявлена ​​как экранированный символ \.. См. Special characters in regular expressions, который должен быть экранирован, если вы хотите убедиться, что они рассматриваются как литералы.

Кроме того, значение HTML5 pattern attribute привязывается по умолчанию, то есть весь рисунок обернут в ^(?: и )$.

Язык регулярных выражений, используемый для этого атрибута является таким же, как используется в JavaScript, за исключением того, что атрибут модели сопоставляются с полной стоимостью, а не только любым подмножества (несколько, как будто это подразумевает ^(?: в начале рисунка и )$ в конце).

Таким образом, вам просто нужно использовать

<input name="asdf" pattern="[^@]+@[^@.]+\.[^@]+" placeholder="email@example.com" title="email@example.com"> 

См updated fiddle