Weryfikacja e-maili HTML5

Mówi się, że „W przypadku HTML5 nie potrzebujemy już js ani kodu po stronie serwera, aby sprawdzić, czy dane wejściowe użytkownika to prawidłowy adres e-mail lub adres URL”

Jak mogę zweryfikować e-mail po wejściu użytkownika? oraz bez JS, jak wyświetlić wiadomość, jeśli użytkownik poda nieprawidłową formę swojego adresu e-mail.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

W HTML5 możesz to zrobić:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

Gdy użytkownik naciśnie przycisk Prześlij, automatycznie wyświetla komunikat o błędzie, taki jak:

input type=emailStronie www.w3.org notatek miejscu, że adres e-mail jest dowolny ciąg, który pasuje do następującego wyrażenia regularnego:

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

Użyj requiredatrybutu i patternatrybutu, aby wymagać, aby wartość pasowała do wzorca wyrażenia regularnego.

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

Używanie [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}do [email protected]/[email protected]

document.getElementById("email").validity.valid

wydaje się być prawdą, gdy pole jest puste lub prawidłowe. Ma to również kilka innych interesujących flag:

Przetestowano w Chrome.

Oto przykład, którego używam dla wszystkich danych wejściowych e-mail w formularzu. Ten przykład to ASP.NET, ale ma zastosowanie do:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: [email protected])" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 nadal sprawdza poprawność przy użyciu wzorca, gdy nie jest to wymagane. Nie znalazłem jeszcze takiego, który byłby fałszywie pozytywny.

To renderuje się jako następujący HTML:

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: [email protected])" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

Wiem, że nie jesteś zainteresowany rozwiązaniem Javascript, ale są pewne rzeczy, takie jak dostosowany komunikat walidacyjny, który z mojego doświadczenia można wykonać tylko za pomocą JS.

Ponadto, używając JS, możesz dynamicznie dodawać walidację do wszystkich pól wejściowych typu e-mail w Twojej witrynie, zamiast modyfikować każde pole wejściowe.

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

Trochę za późno na imprezę, ale to wyrażenie regularne pomogło mi sprawdzić poprawność danych wejściowych typu e-mail po stronie klienta. Chociaż zawsze powinniśmy również przeprowadzać weryfikację po stronie serwera.

<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})(\]?)$">

Można znaleźć więcej regex wszystkich rodzajów tutaj .

TL; DR: Jedyną w 100% poprawną metodą jest sprawdzenie @ -sign gdzieś we wprowadzonym adresie e-mail, a następnie wysłanie wiadomości weryfikacyjnej na podany adres e-mail. Jeśli mogą postępować zgodnie z instrukcjami weryfikacji zawartymi w wiadomości e-mail , wprowadzony adres e-mail jest poprawny.

Długa odpowiedź:

David Gilbertson pisał o tym lata temu:

Musimy zadać dwa pytania:

1. Czy użytkownik zrozumiał, że powinien wpisać adres e-mail w tym polu?
2. Czy użytkownik poprawnie wpisał swój adres e-mail w tym polu?

Jeśli masz dobrze rozplanowany formularz z etykietą z napisem „e-mail”, a użytkownik wprowadza gdzieś symbol „@”, można śmiało powiedzieć, że zrozumiał, że powinien wprowadzać adres e-mail. Łatwo.

Następnie chcemy przeprowadzić weryfikację, aby upewnić się, czy poprawnie wprowadzili swój adres e-mail.

Niemożliwe.

[…]

Każdy błąd z pewnością spowoduje nieprawidłowy adres e-mail, ale może tylko skutkować nieprawidłowym adresem e-mail.

[…]

Nie ma sensu próbować dowiedzieć się, czy adres e-mail jest „prawidłowy”. Prawdopodobieństwo, że użytkownik wprowadzi nieprawidłowy i prawidłowy adres e-mail, jest dużo większe niż wprowadzenie nieprawidłowego .

Innymi słowy, należy zauważyć, że każdy rodzaj walidacji opartej na ciągach znaków może tylko sprawdzić, czy składnia jest nieprawidłowa. Nie może sprawdzić, czy użytkownik rzeczywiście widzi e-mail (np. Ponieważ użytkownik utracił już dane uwierzytelniające, wpisał adres kogoś innego lub wpisał służbowy adres e-mail zamiast osobistego adresu e-mail dla danego przypadku użycia). Jak często pytanie, którego naprawdę szukasz, brzmi: „Czy ten e-mail jest poprawny pod względem składniowym ” zamiast „Czy mogę komunikować się z użytkownikiem przy użyciu podanego adresu e-mail ”? Jeśli zweryfikujesz ciąg bardziej niż „zawiera @”, próbujesz odpowiedzieć na poprzednie pytanie! Osobiście zawsze interesuje mnie tylko to drugie pytanie.

Ponadto niektóre adresy e-mail, które mogą być niepoprawne pod względem składniowym lub politycznym, działają. Na przykład postmaster@aidziała technicznie, mimo że domeny TLD nie powinny mieć rekordów MX . Zobacz także dyskusję na temat walidacji wiadomości e-mail na liście mailingowej WHATWG (gdzie HTML5 jest zaprojektowany w pierwszej kolejności).

Używając HTML 5, po prostu wprowadź wejściowy e-mail, taki jak:

<input type="email"/>

Gdy użytkownik najedzie kursorem na pole wprowadzania, pojawi się podpowiedź z instrukcją, aby wprowadzić prawidłowy adres e-mail. Jednak formularze Bootstrap mają znacznie lepszą wiadomość Tooltip, która mówi użytkownikowi, aby wprowadzić adres e-mail i pojawia się, gdy wprowadzona wartość nie pasuje do prawidłowego adresu e-mail.

Możesz również podążać za tym wzorem

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

Ref: W W3Schools

Według MDN ten RegExp jest w porządku do weryfikacji wiadomości e-mail, ponieważ wiadomości e-mail spełniające specyfikacje powinny do niego pasować.

/^[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])?)*$/

Prawidłowe sprawdzenie poprawności wiadomości e-mail po prostu przy użyciu atrybutu HTML5 „wzorzec” jest bardzo trudne. Jeśli nie użyjesz „wzorca”, ktoś @ zostanie przetworzony. który NIE jest prawidłowym adresem e-mail.

Użycie pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"będzie wymagało [email protected]podania formatu, jednak jeśli nadawca ma format taki jak [email protected](lub podobny), nie zostanie zweryfikowany w celu naprawienia tego, możesz umieścić pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"to, aby sprawdzić poprawność ".com.au lub .net.au lub podobnie.

Jednak użycie tego nie pozwoli komuś@email.com na weryfikację. Tak więc, jeśli chodzi o zwykłe używanie HTML5 do weryfikacji adresów e-mail, nadal nie jest to całkowicie z nami. Aby to ukończyć, użyłbyś czegoś takiego:

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

lub:

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

Jednak nie wiem, jak zweryfikować obie lub wszystkie wersje adresów e-mail za pomocą atrybutu wzorca HTML5.