Атрибут шаблона ввода электронной почты HTML5

Question

Я пытаюсь создать html5-форму, которая содержит один ввод электронной почты, один флажок ввода и один ввод ввода.Я пытаюсь использовать атрибут pattern для ввода электронной почты, но я не знаю, что поместить в этот атрибут.Я знаю, что должен использовать регулярное выражение, которое должно соответствовать производному шаблону JavaScript, но я не знаю, как это сделать.

Я пытаюсь получить этот атрибут, чтобыубедитесь, что письмо содержит одну @ и хотя бы одну или несколько точек, и, если возможно, проверьте, является ли адрес после @ реальным.Если я не могу сделать это с помощью этого атрибута, тогда я рассмотрю возможность использования JavaScript, но для проверки на одну @ и одну или несколько точек я действительно хочу использовать атрибут pattern.

атрибут pattern долженпроверьте:

1. только одну @
2. одну или несколько точек
3. и, если возможно, проверьте, является ли адрес после @ действительным адресом

Альтернативой этому является использование JavaScript, но для всех остальных условий я не хочу использовать JavaScript

Answer 1

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

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Answer 2

Это двойная проблема (как и многие во всемирной паутине).

Вам необходимо оценить, поддерживает ли браузер html5 (я использую Modernizr для этого). В этом случае, если у вас нормальная форма, браузер выполнит эту работу за вас, но если вам нужен ajax / json (как и во многих других случаях), вам все равно нужно выполнить ручную проверку.

.. Итак, я предлагаю использовать регулярное выражение для оценки в любое время перед отправкой. Я использую следующее выражение:

var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

Это взято из http://www.regular -expressions.info / . Это трудный мир для понимания и освоения, поэтому я предлагаю вам внимательно прочитать эту страницу.

Answer 3

В HTML5 вы можете использовать новый тип «email»: http://www.w3.org/TR/html-markup/input.email.html

Например:

<input type="email" id="email" />

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

<input type="text" id="email" />

Answer 4

К сожалению, все предложения, кроме B-Money, в большинстве случаев недействительны.

Вот много действительных писем, таких как:

• günter@web.de (немецкий umlaut)
• антон@россия.рф (русский, рф является допустимым доменом)
• китайский и многие другие языки (см., Например, международная электронная почта и связанные спецификации).

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

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

Он проверяет, содержит ли электронная почта хотя бы один символ (также число или любой другой, кроме другого) @"или пробел) перед" @ ", по крайней мере два символа (или что-то еще, кроме другого" @ "или пробела) после" @ "и одна точка между ними.Этот шаблон не принимает адреса, подобные lol @ company, иногда используемые во внутренних сетях.Но этот можно использовать, если требуется:

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

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

Кстати, я только что написал угловую директиву (еще не проверенную) для проверки электронной почты с novalidate и безна схеме выше для поддержки DRY-принципа:

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

Использование:

<input type="text" is-email />

Для шаблона B-Money достаточно просто "@".Но он отклоняет два или более "@" и все пробелы.

Answer 5

Я использую этот подход, и вы можете изменить его в зависимости от ваших потребностей:

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

Пояснение:

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

   ^ [\ ш]

Слово - это любой символ, цифра или знак подчеркивания. Вы можете использовать шаблон [a-zA-Z0-9_], но он даст вам тот же результат и он длиннее.

2. Далее мы хотим убедиться, что есть хотя бы один такой символ:

   ^ [\ ш] {1}

3. Далее мы хотим разрешить любое имя, цифру или специальные символы в имени. Таким образом, мы можем быть уверены, что электронное письмо не будет начинаться с точки, но может содержать точку, отличную от первой позиции:

   ^ [\ ш] {1} [\ ш + -.]

4. И, конечно, такого символа не должно быть, потому что в адресе электронной почты может быть только одна буква, за которой следует @:

   ^ [\ ш] {1} [\ ш + -.] {0}

5. Далее нам нужен символ @, который является обязательным, но во всем электронном письме может быть только один:

   ^ [\ ш] {1} [\ ш + -.] {0} @

6. Сразу за символом @ нам нужно имя домена. Здесь вы можете определить, сколько символов вы хотите как минимум и из какого диапазона символов. Я бы выбрал все символы слова, включая дефис [\ w -] , и мне нужно как минимум два из них {2,} . Если вы хотите разрешить домены типа t.co , вам нужно разрешить один символ из этого диапазона {1,} :

   ^ [\ ш] {1} [\ ш + -.] {0} @ [\ ш -] {2,}

7. Далее нам нужно разобраться с двумя случаями. Либо есть только имя домена, за которым следует расширение домена, либо есть имя субдомена, за которым следует имя домена, за которым следует расширение, например, abc.com против abc.co.uk, Для этой работы нам нужно использовать токен (a | b) , где a обозначает первый случай, b обозначает второй случай и | обозначает логическое ИЛИ. В первом случае мы будем иметь дело только с расширением домена, но так как оно будет всегда там, независимо от случая, мы можем безопасно добавить его в оба случая:

   ^ [\ ш] {1,} [\ W + -.] {0} @ [\ ш -] [.] {2,} ([A-Za-Z] {2, } | [.] [A-Za-Z] {2,})

Этот шаблон говорит, что нам нужен ровно один символ точки, за которым следуют буквы, без цифр, и мы хотим, чтобы в обоих случаях было как минимум два из них.

8. Во втором случае мы добавим доменное имя перед расширением домена, тем самым сделав исходное доменное имя поддоменом:

   ^ [\ ш] {1} [\ ш + -.] {0} @ [\ ш -] {2,} ([A-Za-Z] {2} [.] | * [.] * тысячи девяносто-два [\ ш -] [.] {2,} [A-Za-Z] {2,}) * ** 1095 тысяча девяносто-четырь *

Доменное имя может состоять из символов слова, включая дефис, и опять же, нам нужно по крайней мере два символа.

9. Наконец, нам нужно отметить конец всего шаблона:

   ^ [\ ш] {1} [\ ш + -.] {0} @ [\ ш -] {2,} ([A-Za-Z] {2} [.] | [ .] [\ ш. -] {2,} [] [A-Za-Z] {2}) $

10. Перейдите сюда и проверьте, соответствует ли ваш адрес электронной почты шаблону: https://regex101.com/r/374XLJ/1

Answer 6

<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

Это модифицированная версия вышеуказанного решения, которая также принимает заглавную букву.

Answer 7

Я использовал следующее Regex, чтобы удовлетворить следующие письма.

abc@example.com # Minimum three characters
ABC.xyz@example.com # Accepts Caps as well.
abce.xyz@example.co.in # Accepts . before @

Код

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

Answer 8

Еще одно решение, построенное на основе спецификации w3org.
Оригинальное регулярное выражение взято из w3org .
Последний «* Ленивый квантификатор» в этом регулярном выражении заменен на « + Один или несколько квантификаторов».
Такой шаблон полностью соответствует спецификации, за одним исключением: он не разрешает адреса доменов верхнего уровня, такие как " foo @ com "

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

Answer 9

<input type="email" name="email" id="email" value="" placeholder="Email" required />

документация http://www.w3.org/TR/html-markup/input.email.html

Answer 10

Вы, вероятно, хотите что-то подобное.Обратите внимание на атрибуты:

• обязательно
• type = email
• автофокус
• шаблон

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*" />