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

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

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

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

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

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

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

На 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
>

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

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

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

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

Вот пример, который я использую для всех вводимых мной форм электронной почты. Это пример 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-]+)*">

Я знаю, что вам не нужно решение 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('');
        }
    });
})

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

<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})(\]?)$">

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

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

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

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

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

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

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

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

Невозможно.

[...]

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

[...]

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

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

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

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

<input type="email"/>

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

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

<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

Согласно 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])?)*$/

Очень сложно правильно проверить электронную почту, просто используя атрибут 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.