HTML5 Email input pattern atrybut

Miałem dokładnie ten problem z html5s e-mail input, używając Alwin Keslers odpowiedź powyżej dodałem regex do HTML5 e-mail input więc użytkownik musi mieć .coś na końcu.

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

Niestety, wszystkie sugestie z wyjątkiem B-Money są nieważne w większości przypadków.

Tutaj jest wiele ważnych e-maili, takich jak:

• gü[email protected] (niem. umlaut)
• антон@россия.рф (rosyjski, рф jest poprawną domeną)
• Chiński i wiele innych języków (patrz na przykład Międzynarodowy e-mail i powiązane specyfikacje).

Ze względu na złożoność, aby uzyskać poprawność walidacji, proponuję bardzo ogólne rozwiązanie:

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

Sprawdza czy email zawiera co najmniej jeden znak (również numer lub cokolwiek z wyjątkiem innego "@" lub białej spacji) przed "@", co najmniej dwa znaki (lub cokolwiek z wyjątkiem innego "@" lub białej spacji) po "@" i jedną kropkę pomiędzy. Ten wzorzec nie akceptuje adresów takich jak lol@company, czasami używanych w sieciach wewnętrznych. Ale ten może być użyty, jeśli jest to wymagane:

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

Oba wzorce akceptują również mniej poprawne e-maile, na przykład e-maile z pionową zakładką. Ale dla mnie to wystarczy. Silniejsze kontrole jak próba połączenia z serwerem pocztowym lub domeną ping powinna się zdarzyć po stronie serwera.

BTW, właśnie napisałem angular directive (jeszcze nie przetestowany) do walidacji e-maili z novalidate i bez wzorca powyżej do obsługi DRY-principle:

.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');
        }
    };
}])

Użycie:

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

Dla B-Money wzór jest " @ " wystarczy. Ale odrzuca dwa lub więcej " @ " i wszystkie spacje.

W HTML5 możesz użyć nowego typu 'email': http://www.w3.org/TR/html-markup/input.email.html

Na przykład:

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

Jeśli przeglądarka implementuje HTML5, upewni się, że użytkownik wprowadził prawidłowy adres e-mail w polu. Zauważ, że jeśli przeglądarka nie zaimplementuje HTML5, będzie traktowana jak typ "tekstowy", czyli:

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

<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="">

Jest to zmodyfikowana wersja powyższego rozwiązania, które również akceptują wielką literę.

Oto podejście, którego używam i możesz je modyfikować w zależności od swoich potrzeb:

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

Wyjaśnienie:

1. Chcemy mieć pewność, że adres e-mail zawsze zaczyna się od słowa:

   ^[\w]

Słowo to dowolny znak, cyfra lub podkreślenie. Możesz użyć wzoru [a-zA-Z0-9_], ale da ci to ten sam wynik i jest dłuższy.

1. Następnie chcemy się upewnić, że istnieje przynajmniej jeden taki postać:

   ^[\w]{1,}

2. Następnie chcemy zezwolić na dowolne słowo, cyfrę lub znaki specjalne w nazwie. W ten sposób możemy być pewni, że e-mail nie zaczyna się od kropki, ale może zawierać kropkę na innej pozycji niż pierwsza:

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

3. I oczywiście nie musi być żadnego takiego znaku, ponieważ adres e-mail może mieć tylko jedną literę, po której następuje @:

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

4. Następnie potrzebujemy znaku@, który jest obowiązkowy, ale może być tylko jeden w całym e-mailu:

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

5. Zaraz za znakiem @ chcemy nazwę domeny. Tutaj możesz określić, ile znaków chcesz jako minimum i z jakiego zakresu znaków. Wybrałbym wszystkie znaki słowne łącznie z myślnikiem [\w -] i chcę przynajmniej dwa z nich {2,}. Jeśli chcesz zezwolić na domeny takie jak t.co , musiałbyś zezwolić na jeden znak z tego zakresu {1,}:

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

6. Następnie musimy zająć się dwoma sprawami. Albo jest tylko nazwa domeny, po której następuje rozszerzenie domeny, albo nazwa subdomeny, po której następuje nazwa domeny, a następnie rozszerzenie, na przykład abc.com kontra abc.co.uk . aby to zadziałało, potrzebujemy aby użyć tokenu (A|b) gdzie a oznacza pierwszy przypadek, b oznacza drugi przypadek i | oznacza logiczne lub. W pierwszym przypadku zajmiemy się tylko rozszerzeniem domeny, ale ponieważ będzie ona zawsze tam, bez względu na przypadek, możemy bezpiecznie dodać ją do obu przypadków:

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

Ten wzór mówi, że potrzebujemy dokładnie jednego znaku kropki, po którym następuje litery, bez cyfr, i chcemy przynajmniej dwie z nich, w obu przypadkach.

1. W drugim przypadku dodamy nazwę domeny przed rozszerzeniem domeny, czyniąc w ten sposób oryginalną nazwę domeny subdomeną:

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

Nazwa domeny może składać się ze znaków słowa, w tym myślnika i ponownie, chcemy co najmniej dwa znaki tutaj.

1. Wreszcie, musimy zaznaczyć koniec całego wzoru:

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

2. Przejdź tutaj i sprawdź, czy twój e-mail pasuje do wzorca: https://regex101.com/r/374XLJ/1

Pewnie chcesz czegoś takiego. Zwróć uwagę na atrybuty:

• wymagane
• type=email
• autofocus
• Wzór

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

Użyłem następujących wyrażeń regularnych, aby zaspokoić następujące e-maile.

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

Kod

<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,})" />

Jeśli nie chcesz pisać białej księgi o standardach poczty e-mail, użyj poniższego przykładu, który po prostu wprowadza dobrze znany atrybut CSS(text-transform: małe litery), aby rozwiązać problem:

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." title="please enter a valid email" />

Jeszcze jedno rozwiązanie, które jest zbudowane w oparciu o specyfikację w3org.
Oryginalny regex jest pobierany z w3org .
The last "* Lazy quantifier" w tym regex został zastąpiony przez "+ jeden lub więcej kwantyfikatorów".
Taki wzór jest w pełni zgodny ze specyfikacją, z jednym wyjątkiem: nie zezwala na adresy domen najwyższego poziomu, takie jak " foo @ com "

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

<input type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,6}$">

Demo-Przetestuj wejście e-mail

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

Dokumentacja http://www.w3.org/TR/html-markup/input.email.html

Aktualizacja 2018 Odpowiedź

Idź tutaj http://emailregex.com/

Javascript:

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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,}))$/

Poniższy wzór regex powinien działać z większością wiadomości e-mail, w tym z rosyjskimi.

[^@]+@[^\.]+\..+

Prostą dobrą odpowiedzią może być wejście takie jak:

input:not(:placeholder-shown):invalid{
  background-color:pink;
  box-shadow:0 0 0 2px red;
}
/* :not(:placeholder-shown) = when it is empty, do not take as invalid */
/* :not(:-ms-placeholder-shown) use for IE11 */
/* :invalid = it is not followed pattern or maxlength and also if required and not filled */
/* Note: When autocomplete is on, it is possible the browser force CSS to change the input background and font color, so i used box-shadow for second option*/

Type your Email:
<input 
  type="email"
  name="email"
  lang="en"
  maxlength="254"
  value=""
  placeholder="[email protected]"
  autocapitalize="off" spellcheck="false" autocorrect="off"
  autocomplete="on"
  required=""
  inputmode="email"
  pattern="^(?![\.\-_])((?![\-\._][\-\._])[a-z0-9\-\._]){0,63}[a-z0-9]@(?![\-])((?!--)[a-z0-9\-]){0,63}[a-z0-9]\.(|((?![\-])((?!--)[a-z0-9\-]){0,63}[a-z0-9]\.))(|([a-z]{2,14}\.))[a-z]{2,14}$">

Według następującego wzoru:

• zasoby o standardowy format wiadomości e-mail: jakie znaki są dozwolone w adresie e-mail?
• zasoby o standardowe wejście poczty HTML atrybuty :

Https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

• Jest to jedna z najbardziej rozpoznawalnych i najbardziej rozpoznawalnych marek w Polsce.]}
• najdłuższa możliwa subdomena (Może =0-64 znak), domena (=0-64 znak), rozszerzenie pierwszego poziomu (=2-14 znak), rozszerzenie drugiego poziomu (Może = 2-14 znaków).
• unikanie nie zwykłych, ale dozwolonych znaków w nazwie E-mail i akceptowanie zwykłych znaków, które słynne darmowe usługi e-mail, takie jak Outlook, Yahoo, Gmail itp. zaakceptuje je. Oznacza akceptację tylko: kropka (.), dash (-), podkreślenie (_) tylko pomiędzy a-z (małe litery) i liczby a także nie akceptując podwójnych obok siebie i maksimum 64 znaki.

Uwaga: w tej chwili, dłuższy adres, a nawet znaki Unicode są możliwe w URL, a także użytkownik może wysyłać wiadomości e-mail do lokalnego lub IP, ale myślę, że nadal lepiej jest nie akceptować nietypowych rzeczy, jeśli strona docelowa jest publiczna.

Wyjaśnij regex:

1. ^...$ Od początku do końca
2. (?![\.\-_]) nie zaczyna się od tych: . - _
3. ((?!--)[a-z0-9\-]) accept a till Z and numbers and-but not --
4. ((?![\-\._][\-\._])[a-z0-9\-\._]) od a do z małe litery i cyfry, a także . / align = "left" /
5. {0,63} długość od zera do 63 (druga grupa [a-z0-9] wypełni +1, ale nie pozwól, aby znak just był. - _)
6. @ znak at
7. (|(rule)) nie istnieje lub jeśli istnieje, należy postępować zgodnie z zasadą. (Dla subdomeny i rozszerzenia drugiego poziomu)
8. \. kropka

Wyjaśnienie atrybutów:

type="email" w nowoczesnych przeglądarkach pomaga również prawidłowy email adres

name="email" autocomplete="on" aby przeglądarka zapamiętała łatwe ostatnio wypełnione wejście do automatycznego uzupełniania

lang="en" pomoc dla domyślnego wejścia be English

inputmode="email" pomoże dotykowe klawiatury być bardziej kompatybilne

maxlength="254" ustawienie maksymalnej długości wejścia

autocapitalize="off" spellcheck="false" autocorrect="off" wyłączanie możliwych błędnych korektorów automatycznych w przeglądarce

required="" to pole jest wymagane, jeśli było puste lub nieprawidłowe, formularz nie zostanie przesłany

pattern="..." regex wewnątrz sprawdzi Walidacja

Przetestowałem następujące regex, który daje taki sam wynik jak Chrome HTML walidacji wprowadzania wiadomości e-mail.

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

Możesz przetestować go na tej stronie: regex101

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

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="">