Jak potwierdzić formularz e-mail po stronie klienta w JavaScript

Jeśli chcesz przesłać dane do serwera, konieczne jest podwójne sprawdzenie formatu danych do przesłania danych. Ten proces jest nazywany Walidacja formularza po stronie klienta. Walidacja formularza po stronie klienta zapewnia, że ​​przesłane dane spełnia kryteria określone w formularzu.

Po stronie klienta, e -maile Formularze są zatwierdzane w celu uzyskania nieprawidłowych danych, aby użytkownik mógł je natychmiast poprawić. W innych przypadkach, jeśli nieprawidłowe dane zostaną przesłane do serwera, zostaną odrzucone, a odpowiedni serwer odniesie je z powrotem do klienta.

W tym spisie omówi walidacja Formularz e -mailS NA po stronie klienta W JavaScript. A więc zacznijmy!

Jak potwierdzić formularz e-mail po stronie klienta w JavaScript

E -mail obejmuje „strunowy,„Który jest reprezentowany jako podzbiór znaków ASCII, podzielony na dwie części, wykorzystując„@”Symbol. Można to zapisać jako „userinfo@domain", Gdzie "Informacje użytkownika”To prywatne informacje użytkownika. Długość „Informacje użytkownika„Część nie powinna być więcej niż 64 postacie, podczas gdy domena nazwa może mieć 253 postacie.

„„Informacje użytkownika„Część może zawierać znaki ASCII poniżej

• Liczby z 0 Do 9.
• Duże litery (A-Z) i małe litery (A-Z) Angielskie listy.
• Znaki specjalne, takie jak ~ _ ' / ? - + = ^ | $ * ' ! & # %
• Możesz także dodać postać z okresu „.”, Ale nie powinno to być pierwsza i ostatnia postać części„ UserInfo ”i nie powtarzaj jej po innej.

Nazwa domeny określona w adresie e -mail, takim jak org, informacje, net, com, nas, może zawierać cyfry, litery, łączniki i pełne zatrzymanie.

Sprawdź poniżej kilka przykładów ważnych i nieprawidłowych identyfikatorów e-mail:

Prawidłowe przykłady formatu e -mail

• [email protected]
• [email protected]
• [email protected]

Nieprawidłowe przykłady formatu e -mailowego

• galaktyka.com („@„Znak nie jest dodany)
• [email protected] (domena najwyższego poziomu nie może zacząć od „.”)
• [email protected] (".A”Nie jest ważną domeną najwyższego poziomu)
• [email protected] (nie zaczynaj e -mail z „." postać)
• @każdy.domena.internet ("Informacje użytkownika„Brakuje części przed„@" postać )

Teraz zademonstrujemy praktyczny przykład związany z formularzem sprawdzania poprawności e -mail w JavaScript.

Przykład: Własność formularza e -mail po stronie klienta w JavaScript
Przede wszystkim stworzymy formularz po stronie klienta o „wejście„Pole do wprowadzenia identyfikatora e -mail i„Składać”Przycisk weryfikacji formatu e -mail:

Uprzejmie wprowadź swój adres e -mail

Wyrażenie regularne do sprawdzania poprawności formularza pocztowego po stronie klienta w JavaScript

W JavaScript, Wyrażenia regularne to jedna z najbardziej przydatnych metod wykorzystywanych do weryfikacji formatu e -mail. Reprezentują charakter wzoru, który jest porównywany z wejściem użytkownika.

W naszym pliku JavaScript dodamy następujące wyrażenie regularne do sprawdzania poprawności identyfikatora e -mail wprowadzonego przez użytkownika:

Mailformat = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;

Powyższe wyrażenie regularne pozwala na dodanie wielkich liter (A-Z) i małych liter (A-Z), cyfr (0-9), okresu „.”I znaki specjalne, takie jak ~ _ ' / ? - + = ^ | $ * ' ! & # %, w identyfikatorze e -mail.

Stworzymy „Potwierdź email()”Funkcja w JavaScript, która zajmie„Wprowadź tekst„Jako argument. Następnie będziemy przechowywać wspomniany wyrażenie regularne w „Mailformat". Dodano „Mailformat”Jest następnie porównywane z wejściem użytkownika. Jeśli wprowadzony identyfikator wiadomości e -mail ma prawidłowy format, na ekranie pojawi się alert za pomocą ciągu „Wpisałeś prawidłowy adres e -mail!". W przeciwnym razie da ci znać, że identyfikator e -mail jest nieprawidłowy:

funkcja VALIDATEEMAIL (InputText)
var Mailformat = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;
if (inputText.wartość.mecz (Mailformat))
Alert („Wpisałeś prawidłowy adres e -mail!");
dokument.Formularz 1.Tekst 1.centrum();
zwrócić true;

w przeciwnym razie
alert („nieprawidłowy adres e -mail”);
dokument.Formularz 1.Tekst 1.centrum();
zwrócić fałsz;

Ustawiliśmy również styl elementów HTML, aby poprawić ich wygląd w formularzu sprawdzania poprawności e -mail:

Teraz otworzymy nasze „indeks.html ” Plik za pomocą kodu VS ”Serwer na żywo" rozszerzenie:

Oto formularz sprawdzania poprawności e -mail z polem wejściowym i przyciskiem przesyłania:

Po raz pierwszy wprowadzimy prawidłowy identyfikator e -mail i:

Po kliknięciu „Składać” button, an alert box appears on our web page, which states that the entered email address is valid:

Teraz, aby sprawdzić nieprawidłowy e -mail, napiszemy wiadomość e -mail z nieprawidłowym formatem, a następnie kliknij przycisk Prześlij:

Możesz zobaczyć, że nasz formularz sprawdzania wiadomości e -mail działa doskonale w sprawie sprawdzania poprawności adresu e -mail zgodnie z określonym formatem.

Wniosek

Korzystając z JavaScript, możesz sprawdzić weryfikację formularzy e-mail po stronie klienta. Utworzony formularz sprawdzania poprawności wiadomości e -mail oparty jest na wymaganiach użytkownika, takich jak zezwolenie na wyrażenia regularne, akceptowanie tylko znaków i cyfr w identyfikatorze e -mail lub tylko zezwolenie na określone domeny. Sprawdzanie poprawności formularzy e -mail pomaga również przesłać prawidłowe i cenne informacje do serwera. W tym spisie omówiono procedurę sprawdzania poprawności formularzy e-mail po stronie klienta w JavaScript za pomocą odpowiednich przykładów.