HTML5 проверка электронной почты


102

Говорят: «С HTML5 нам больше не нужен js или код на стороне сервера, чтобы проверить, является ли введенный пользователем действительный адрес электронной почты или URL».

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

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

50
Вам всегда нужно проверять на стороне сервера. Умный клиент может обойти любые меры безопасности на стороне клиента.
Бенджамин Грюнбаум

Этот ответ может помочь при попытке настроить проверку формы HTML5. Конечно, вам, вероятно, все равно понадобится проверка на стороне сервера.
Joeytje50

2
regex Проверка электронной почты никогда не должна использоваться ни при каких обстоятельствах. Проверки регулярных выражений имеют слишком много недостатков. Лучший способ «проверить» адреса электронной почты - просто попросить их ввести его дважды и запустить проверку Regex, которая выдает ПРЕДУПРЕЖДЕНИЕ пользователю, что он не выглядит как действительный адрес электронной почты, если он не соответствует шаблону, и просит пользователя дважды проверить. Таким образом, если он действительно действителен, но регулярное выражение не работает (как это часто бывает), пользователь может просто подтвердить, что он знает, что он действителен, и продолжить. Слишком много сайтов используют проверку регулярных выражений, и это разочаровывает многих пользователей.
Soundfx4,

Я рекомендую проверить эту статью: debounce.io/blog/articles/email-validation-for-html5-forms
Иман Хиджази

Просить пользователя ввести один и тот же адрес электронной почты дважды бесполезно. Если вы не знаете их адрес электронной почты, просьба ввести его дважды не увеличивает шансы. Если они действительно знают свой адрес электронной почты, просьба ввести его дважды - просто плохой интерфейс.
Микко Ранталайнен,

Ответы:


120

В HTML5 это можно сделать так:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

И когда пользователь нажимает кнопку «Отправить», автоматически отображается сообщение об ошибке, например:

Сообщение об ошибке


3
В чем преимущество этого паттерна? Указание типа электронной почты уже включает встроенный шаблон для определения этого.
Рич Брэдшоу,

3
@RichBradshaw: Да, вы правы. Нет необходимости указывать шаблон (я просто скопировал код из OP, исправил сейчас :))
Midhun MP

6
@MichaelDeMutis: Вы можете использовать requiredатрибут
Midhun MP

29
письмо не проверяется по .comэлектронной почте. Проверяется только знак @. Ex. Я могу войти example@gmailи сохранить форму. хотя это не действительный адрес электронной почты. Есть ли обходной путь для правильной проверки example@gmail.com?
Ручика

9
@Лиз. example@gmailможет быть недействительным адресом электронной почты, но это действительный формат адреса электронной почты.
pajaja

47

На input type=emailстранице сайта www.w3.org указано, что адрес электронной почты - это любая строка, которая соответствует следующему регулярному выражению:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Используйте requiredатрибут и patternатрибут, чтобы требовать, чтобы значение соответствовало шаблону регулярного выражения.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

14
Вы должны вставить образец без двух '/' и начального '^' и конечного '$' символа. Как эти[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*
Виктор

4
@Victor Извини, но ты частично ошибаешься. Эти символы важны, без них шаблон начнет совпадать везде в строке и сделает его бесполезным. Где вы правы, так это выпуская косые черты.
Hexodus

@Victor, ваш ответ сработал для меня. Регулярное выражение OP дало мне ложное срабатывание, чтобы соответствовать требованиям формы, даже если это действительный адрес электронной почты. Возможно, дело в том, что я не использую обычный HTML, а использую React JS для рендеринга HTML-формы.
Ka Mok

Я почти не проголосовал за это, потому что правильный ответ - использовать type="email"и проверять validлогическое свойство на DOMNode - нет необходимости повторять базовое регулярное выражение
Доминик

Спасибо, что упомянули об этом.
Стефан Чиприан Хотолеану

17

Использование [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}for somemail@email.com/somemail@email.com.vn


4
Это регулярное выражение предъявляет ряд несоответствующих требований к адресам электронной почты - например, оно отклоняет адреса электронной почты, которые имеют одно- или двухбуквенное имя пользователя или которые размещены на однобуквенном доменном имени.
duskwuff -inactive -

Отредактировано. Спасибо @duskwuff
Ван Нгуен

По-прежнему отвергает однобуквенные доменные имена.
duskwuff -inactive -

Это позволяет использовать домены с 1 буквой / цифрой: [a-zA-Z0-9.-_] {1,} @ [a-zA-Z0-9 .-] {1,} [.] {1} [a-zA -Z0-9] {2,}
Руль направления

Также обратите внимание, что, например, postmaster@aiэто действующий адрес электронной почты, и это регулярное выражение также запретит его. (Источник: serverfault.com/q/154991/104798 )
Микко Ранталайнен,

12
document.getElementById("email").validity.valid

кажется верным, когда поле либо пустое, либо действительное. Здесь есть и другие интересные флаги:

введите описание изображения здесь

Проверено в Chrome.


8

Вот пример, который я использую для всех вводимых мной форм электронной почты. Это пример ASP.NET, но применим к любому:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 по-прежнему проверяет использование шаблона, когда он не требуется. Еще не нашел ни одного ложного срабатывания.

Это отображается как следующий HTML:

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: xxx@xxx.xxx)" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

7

Я знаю, что вам не нужно решение Javascript, однако есть некоторые вещи, такие как настраиваемое сообщение проверки, которое, по моему опыту, может быть выполнено только с использованием JS.

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

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

Пожалуйста, не публикуйте только ответы по ссылкам. Просто вставьте основные части ссылки в свой ответ
Rizier123

5

Немного поздно для вечеринки, но это регулярное выражение помогло мне проверить ввод типа электронной почты на стороне клиента. Тем не менее, мы всегда должны проводить проверку и на стороне сервера.

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

Вы можете найти более регулярное выражение всех видов здесь .


4

TL; DR: единственный 100% правильный метод - это проверить наличие @ -sign где-нибудь во введенном адресе электронной почты, а затем отправить сообщение проверки на указанный адрес электронной почты. Если они могут следовать инструкциям по проверке в сообщении электронной почты , введенный адрес электронной почты правильный.

Длинный ответ:

Дэвид Гилбертсон писал об этом много лет назад:

Нам нужно задать два вопроса:

  1. Понимал ли пользователь, что он должен был ввести адрес электронной почты в это поле?
  2. Правильно ли пользователь ввел в это поле свой адрес электронной почты ?

Если у вас есть хорошо продуманная форма с надписью «электронная почта», и пользователь где-то вводит символ «@», то можно с уверенностью сказать, что он понял, что должен был вводить адрес электронной почты. Легко.

Затем мы хотим провести некоторую проверку, чтобы убедиться, что они правильно ввели свой адрес электронной почты.

Невозможно.

[...]

Любые будут печатать с ошибками , безусловно , приведут к неправильному адресу электронной почты, но только возможно привести к недопустимому адресу электронной почты.

[...]

Нет смысла выяснять, является ли адрес электронной почты «действительным». Вероятность того, что пользователь введет неправильный и действительный адрес электронной почты, гораздо выше, чем неправильный .

Другими словами, важно отметить, что любой вид проверки на основе строк может проверять только неверность синтаксиса. Он не может проверить, действительно ли пользователь видит электронное письмо (например, потому что пользователь уже потерял учетные данные, напечатал чужой адрес или напечатал рабочий адрес электронной почты вместо личного адреса электронной почты для данного варианта использования). Как часто вам действительно задают вопрос: « Синтаксически ли это электронное письмо допустимо? » Вместо « Могу ли я общаться с пользователем, используя данный адрес электронной почты »? Если вы проверяете строку больше, чем «содержит ли она @», вы пытаетесь ответить на первый вопрос! Лично меня всегда интересовал только последний вопрос.

Кроме того, работают некоторые адреса электронной почты, которые могут быть синтаксически или политически недействительными. Например, postmaster@aiтехнически работает, даже если в TLD не должно быть записей MX . Также см. Обсуждение проверки электронной почты в списке рассылки WHATWG (где HTML5 разработан в первую очередь).


2

Используя HTML 5, просто сделайте входное электронное письмо следующим образом:

<input type="email"/>

Когда пользователь наводит курсор на поле ввода, появляется всплывающая подсказка, предлагающая ввести действительный адрес электронной почты. Однако формы Bootstrap имеют гораздо лучшую всплывающую подсказку, предлагающую пользователю ввести адрес электронной почты, и она появляется в тот момент, когда введенное значение не соответствует действительному адресу электронной почты.


Но это не отменяет такие случаи, как «abc @ gmail».
nbsamar

да, я так думаю, я бы хотел, чтобы пользователь поставил gmail или hotmail, например, если мой пользователь поставил другое, то не позволяйте им продолжать с моим логином, вы знаете, как я могу это сделать?
Саймон

2

Вы также можете следовать этому шаблону

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Ссылка: В W3Schools


1
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="please enter valid email [test@test.com].">вы также можете добавить заголовок, чтобы показать сообщение о действительности.
imdzeeshan

1

Согласно MDN , этот RegExp подходит для проверки электронных писем, поскольку электронные письма, соответствующие спецификациям, должны ему соответствовать.

/^[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])?)*$/

0

Очень сложно правильно проверить электронную почту, просто используя атрибут HTML5 "шаблон". Если вы не используете "шаблон", кто-то @ будет обработан. который НЕ является действительным адресом электронной почты.

Использование pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"потребует, чтобы формат был, someone@email.comоднако, если отправитель имеет формат, подобный someone@email.net.au(или подобный), не будет проверен, чтобы исправить это, вы можете поставитьpattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" указать, что это будет проверять ".com.au или .net.au или подобное.

Однако, используя это, он не разрешит проверку кого-то@email.com. Так что простое использование HTML5 для проверки адресов электронной почты еще не полностью с нами. Чтобы завершить это, вы должны использовать что-то вроде этого:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

или:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

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


1
Проверки регулярных выражений никогда не должны использоваться ни при каких обстоятельствах. Слишком много шаблонов и слишком много недостатков. Например, something+customwordhere@email.com считается недопустимым для многих проверок регулярных выражений, хотя на самом деле он действителен на 100%. Regex - это заноза для меня и многих других пользователей, и с ним нужно избавиться. Необходимо использовать альтернативный метод, чтобы убедиться, что пользователь вводит действительный адрес электронной почты.
Soundfx4

Также обратите внимание, что, например, postmaster@aiэто действующий адрес электронной почты, и это регулярное выражение также запретит его. (Источник: serverfault.com/q/154991/104798 )
Микко Ранталайнен

Инструмент проверки электронной почты, такой как DeBounce, также рекомендуется вместе с HTML5.
Иман
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.