Użytkownicy mogą łatwo zarządzać sprawdzaniem poprawności formularzy za pomocą wyrażeń JavaScript i regularnych. Formularze mają kluczowe znaczenie dla prawidłowego działania dowolnej strony internetowej, a zarządzanie nieprawidłowym wejściem w polach formularzy jest zadaniem programisty. Ten artykuł pokaże, jak utworzyć formularz i jak umieścić różne kontrole sprawdzania poprawności na różnych polach formularza za pomocą JavaScript.

Krok 1: Konfigurowanie dokumentu HTML

Utwórz nowy dokument HTML i wpisz w następujących wierszach, aby utworzyć formularz:

To jest przykład walidacji formularza

Wpisz swoje imię:

Wpisz swój adres e -mail

Wpisz swój kontakt nr#

Składać!

W powyższych liniach:

• A znacznik służy do utworzenia formularza z ustawioną nazwą ważność i metoda jest ustawiona na "post". Również właściwość OnSubmit jest ustawiona „Return Formubmit ()” który wykonuje tę metodę po przesłaniu i składa formularz tylko wtedy, gdy ta metoda zwróci prawdziwie.
• Następnie po prostu użyj

  tagi, aby montować użytkownika i Aby przejąć dane wejściowe od użytkownika. Pamiętaj, że każdy znacznik wejściowy ma unikalną nazwę.

• Na końcu formularza utwórz przycisk z typ Ustawić "składać".

Jeśli dokument HTML zostanie załadowany do przeglądarki internetowej, pokaże:

Strona internetowa pyta o imię użytkownika, adres e -mail i numer kontaktowy.

Krok 2: Konfigurowanie pliku JavaScript

W JavaScript zacznij od utworzenia funkcji formubmit () z następującymi wierszami:

funkcja Formubmit ()
// Wszystkie następne linie zostaną uwzględnione w ciele tej funkcji

Następnie utwórz trzy zmienne i przechowuj wartości z trzech pola w nich za pomocą następujących linii:

var FirstName = Dokument.form.ważność.nazwa.wartość;
var conactNumber = dokument.form.ważność.e-mail.wartość;
var e -mailadr = dokument.form.ważność.Tele.wartość;

W powyższych liniach, "dokument" Obiekt został użyty do uzyskania „Formy” atrybut, który był dalej używany z nazwą formularza ważność Aby uzyskać dostęp do znaczników wejściowych z ich nazwami.

Następnie zdefiniuj wyrażenia regularne sprawdzania ważności każdego pola za pomocą następujących linii:

var e -mailRegex = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var teeregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;

W powyższych liniach:

• e -mailRegex czeki prawidłowego adresu e -mail z @ w tym nawet DOT ”.”I łącznik
• Teregex Sprawdzanie tylko znaków liczbowych o maksymalnej długości zestawu wejściowego na 10
• Nameregex Sprawdzanie dowolnych znaków specjalnych lub liczb w polu nazwy

Następnie porównaj trzy wyrażenia regularne z ich odpowiednimi wartościami pola tekstowego za pomocą instrukcji IF, a jeśli dowolne pole jest nieprawidłowe, po prostu zwróć i powiadom użytkownika, dla tego wszystkiego użyj następujących wierszy:

if (nazwa firstName == "" || NAMEREGEX.test (nazwa pierwszego))
okno.alert („Nieprawidłowe imię”);
returnfalse;

if (e -mailAdr == "" || !e -mailRegex.test (e -mail))
okno.Alert („Wprowadź prawidłowy adres e-mail.");
returnfalse;

if (conactNumber == "" || !Teregex.test (conactNumber))
alert („nieprawidłowy numer telefonu”);
returnfalse;

Następnie skłonić użytkownika do tego, że wejścia były prawidłowe i zwróć wartość jako PRAWDA:

alert („formularz przesłany poprawnymi informacjami”);
zwrócić true;

Pełny kod JavaScript jest jako:

funkcjaFormSubmit ()
var FirstName = Dokument.form.ważność.nazwa.wartość;
var conactNumber = dokument.form.ważność.e-mail.wartość;
var e -mailadr = dokument.form.ważność.Tele.wartość;
var e -mailRegex = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var teeregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;
if (nazwa firstName == "" || NAMEREGEX.test (nazwa pierwszego))
okno.alert („Nieprawidłowe imię”);
returnfalse;

if (e -mailAdr == "" || !e -mailRegex.test (e -mail))
okno.Alert („Wprowadź prawidłowy adres e-mail.");
returnfalse;

if (conactNumber == "" || !Teregex.test (conactNumber))
alert („nieprawidłowy numer telefonu”);
returnfalse;

alert („formularz przesłany poprawnymi informacjami”);
returnTrue;

Krok 3: Testowanie walidacji formularza

Wykonaj działanie sprawdzania poprawności formularza, wykonując dokument HTML i wpisując dane do pól wejściowych. Podaj nieprawidłową nazwę z znakami specjalnymi lub liczbami

Strona internetowa wywołała użytkownika, że ​​nazwa jest nieprawidłowa.

Spróbuj ponownie z poprawną nazwą i nieprawidłowym adresem e -mail:

Użytkownik został powiadomiony, że adres e -mail jest nieprawidłowy.

Następnie spróbuj z prawidłową nazwą i prawidłowym adresem e -mail, ale z nieprawidłowym numerem kontaktowym:

Strona internetowa wywołała użytkownika, że ​​numer kontaktowy jest nieprawidłowy.

Następnie, do ostatniego testu, podaj wszystkie prawidłowe informacje, takie jak:

Przy wszystkich prawidłowych informacjach sprawdzanie poprawności formularza jest skuteczne, a aplikacja internetowa może iść naprzód.

Wniosek

Walidacja formularza może być zaimplementowana na formularzu HTML z JavaScript, wyrażeniami regularnymi i odrobiną budowania logicznego. Wyrażenia regularne mogą zdefiniować prawidłowe przyjęte dane wejściowe dla pola. Następnie wyrażenie regularne można dopasować do wartości odpowiedniego pola wejściowego za pomocą metody testu (). Dotyczy to również innych rodzajów pól wejściowych, czy to dotyczy adresu, kodu pocztowego lub nazwy kraju.