Атрибут шаблона ввода HTML5

Ответ 1

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

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

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

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

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

Ответ 2

У меня была эта точная проблема с входом HTML5s по электронной почте, используя ответ Alwin Keslers выше. Я добавил регулярное выражение к элементу ввода HTML5, поэтому пользователь должен иметь.что-то в конце.

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

Ответ 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" />

Ответ 4

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

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

• gü[email protected](немецкий умляут)
• антон@россия.рф (русский, рф - действительный домен)
• китайский и многие другие языки (см., например, Международная электронная почта и связанные спецификации).

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

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

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

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

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

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

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s][email protected][^@\\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 достаточно "@" . Но он отклоняет два или более "@" и все пробелы.

Ответ 5

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

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

Объяснение:

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

   ^ [\ ш]

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

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

   ^ [\ w] {1,}

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

   ^ [\ w] {1,} [\ w. + -]

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

   ^ [\ w] {1,} [\ w. + -] {0,}

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответ 6

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

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

Ответ 7

Я использовал следующий Regex для удовлетворения следующих писем.

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # 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,})" />

Ответ 8

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

• требуется
• Тип = электронная почта
• автофокусировка
• шаблон

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Обновлено 2018 Ответ

Зайдите сюда http://emailregex.com/

Javascript:

/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

Ответ 12

Я проверил следующее регулярное выражение, которое дает тот же результат, что и проверка ввода HTML-адресов в Chrome Html.

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

Вы можете проверить это на этом веб-сайте: regex101

Ответ 13

^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$

Ответ 14

pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}"

<input type="email"  class="form-control" id="driver_email" placeholder="Enter Driver Email" name="driver_email" pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}" required="">