Проверка HTML5 Email

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

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

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

Ответы

Ответ 1

В HTML5 вы можете сделать вот так:

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

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

Ответ 2

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

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

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

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

Ответ 3

Используя [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} для [email protected]/[email protected]

Ответ 4

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

Я знаю, что вы не после решения 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('');
        }
    });
})

Ответ 7

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

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

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

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

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

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

Невозможно.

[...]

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

[...]

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

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

Ответ 8

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

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

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

Ответ 9

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

Использование pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" потребует, чтобы формат был [email protected], однако, если отправитель имеет формат типа [email protected] (или аналогичный), не будет проверен, чтобы исправить это, вы можете поставить 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 protected] проверять. Так что, поскольку простое использование 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.

Ответ 10

Вы также можете следовать этой схеме

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

Ссылка: в W3Schools

Ответ 11

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

<input type="email"/>