Как работает электронная почта типа ввода HTML 5 и надежна ли она?

Я создаю форму, которая принимает адреса электронной почты и решает, использовать ли input type='email' или input type='text' и выполнять проверку с помощью JavaScript. Я знаю, что определение того, являются ли адреса электронной почты допустимым форматом или нет, является сложной задачей, поэтому кто-нибудь знает, насколько хорошо работает атрибут электронной почты HTML 5?

Причины использования атрибута email

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

Причины не использовать атрибут электронной почты

  • Не знаю, насколько точно это работает
  • для недопустимого ввода внешний вид отличается от остальных полей ввода формы

EDIT: кто-нибудь знает, как работает атрибут e-mail в том смысле, какое регулярное выражение он использует?

2 3
html5 validation user-interface input user-experience

2 ответа:

Факты о HTML5 <input type="email">:

  1. каждый браузер обрабатывает проверку электронной почты по-разному. Opera принимает *@* в качестве действительного адреса электронной почты. В Safari, Chrome и Firefox вам нужно ввести не менее *@*.*
  2. Не все браузеры "поддерживают" type= "email". Вы все еще можете использовать type= "email", но браузер будет угрожать ему как type= "text", если они не распознают type= "email"
  3. на iPhone, когда вы приходите на вход с типом= "email", iPhone будет отображать " @ " на главном экране клавиатуры, делает ваше приложение должно быть более удобным для пользователя
  4. Вы можете задать регулярное выражение при использовании type= "email"

Я предлагаю вам начать использовать этот новый атрибут HTML5 вместе с вашей собственной проверкой, чтобы достичь пункта (3) выше.

Для получения дополнительной информации :

  1. http://davidwalsh.name/html5-email
  2. http://www.the-art-of-web.com/html/html5-form-validation/#.UesKldKl5KU
  3. http://diveintohtml5.info/forms.html

Надеюсь, это поможет.

4

Я использовал его и мне понравилось. Однако мне пришлось переопределить сообщение об ошибке проверки. Вот как я это сделал.

//Listen for the 'input' event on the email field.  If HTML5 validation throws a typeMismatch, then
// override the default message with something more useful and/or sarcastic.
$('#email').bind('input', function () {
    //We need to reset it to blank or it will throw an invalid message.
    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("Dude '" + this.value + "' is not a valid email. Try something like "+
            "jim@email.org. And no we are not checking if it actually works, we are just looking "+
            "for the @ sign. ");
    }
});

Вы можете найти это в рабочем примере на github.

2