Перевірка електронної пошти 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,}для 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 або подібним.

Однак, використовуючи це, це не дозволить netko@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.