Walidacja formularza JavaScript
Walidacja formularza jest podstawową i najważniejszą częścią procesu tworzenia stron internetowych. Zwykle sprawdzanie poprawności formularza odbywa się po stronie serwera. Walidacja formularza pomaga wyświetlać użytkownikowi komunikaty o błędach, jeśli podano jakieś niepotrzebne lub niewłaściwe dane, lub wymagane pole pozostało puste. Jeśli serwer znajdzie jakikolwiek błąd, cofnie ten błąd; Następnie pokazujemy komunikat o błędzie użytkownikowi. Ale możemy użyć JavaScript na froncie, aby zweryfikować dane formularza i od razu pokazać błędy. W tym artykule poznamy podstawową walidację formularza w JavaScript. Więc przejdźmy od razu do przykładów i zobaczmy, jak możemy to zrobić w JavaScript.
Przykłady
Przede wszystkim zakładamy formularz o nazwie „testform”, w którym mamy pole wejściowe z etykietą „Nazwa użytkownika”, a typ wejściowy przesyła w naszym pliku HTML. W znaczniku formularza stworzyliśmy zdarzenie onSubmit, w którym dokonujemy zamknięcia i zwracania funkcji VALITODEFUNC ().
W pliku skryptu napiszemy definicję funkcji VALITODEFUNC (), która zostanie wykonywana za każdym razem, gdy użytkownik trafił do przycisku przesyłania. W tej funkcji potwierdzimy pole wejściowe nazwy użytkownika. Przypuszczamy, że chcemy potwierdzić, że pole nazwy użytkownika jest puste, czy nie, gdy użytkownik trafi do przycisku przesyłania.
Tak więc, aby potwierdzić pole nazwy użytkownika. Najpierw przypisujemy zmienną do dokumentu.Testform, po prostu, aby wyczyścić kod czystego i zrozumiałego. Następnie, w definicji funkcji, napiszemy kod do sprawdzania poprawności. Napiszemy instrukcję IF, aby sprawdzić pole pustego formularza. Jeśli pole nazwy użytkownika jest puste, pokażemy pole alertu, aby pokazać błąd, skoncentruj się ponownie na polu nazwy użytkownika i zwrócimy false, aby formularz nie zostanie przesłany. W przeciwnym razie, jeśli przekazuje sprawdzenie, a dane zostaną sprawdzone, zwrócimy wierność do funkcji.
var theform = dokument.Testform;// kod walidacji formularza
funkcja ValidationFunc ()
if (form.nazwa.wartość == "")
Alert („Nazwa jest pusta”);
form.nazwa.centrum();
zwrócić fałsz;
powrót (prawda);
Po napisaniu całego tego kodu. Jeśli uruchomimy kod i klikniemy przycisk Prześlij bez pisania niczego w polu formularza.
Jak można obserwować na zrzucie ekranu podłączonym poniżej, rzuca błąd w polu alertu.
To bardzo podstawowy, ale dobry przykład, aby rozpocząć wdrożenie sprawdzania poprawności formularza. Aby uzyskać dalszą wdrożenie, podobnie jak weryfikacje wielu formularzy lub chcesz również sprawdzić długość znaków.
W tym celu najpierw przypuszczamy dwa pola formularzy w znaczniku formularza z etykietą „e -mail” i „hasło” w naszym pliku HTML.
W celu sprawdzania poprawności w JavaScript ponownie umieścimy instrukcję IF do sprawdzania poprawności pól formularza e -mail i hasła w definicji funkcji pliku skryptu. Załóżmy, że chcemy zastosować wiele walidacji w polu e -mail, tak jak pole nie powinno być puste, a jego długość nie powinna być mniejsza niż 10 znaków. Możemy więc użyć lub „||” W oświadczeniu IF. Jeśli wystąpi którykolwiek z tych błędów wyświetli pole alertu z komunikatem o błędzie, który chcemy wyświetlić, skupić się na polu formularza e -mail i zwrócić false do funkcji. Podobnie, jeśli chcemy zastosować sprawdzenie długości znaków w polu hasła, możemy to zrobić.
var theform = dokument.Testform;// kod walidacji formularza
funkcja ValidationFunc ()
if (form.nazwa.wartość == "")
Alert („Nazwa jest pusta”);
form.nazwa.centrum();
zwrócić fałsz;
if (form.e-mail.wartość == "" || form.e-mail.wartość.długość < 10)
alert („e -mail jest nieodpowiedni”);
form.e-mail.centrum();
zwrócić fałsz;
if (form.hasło.wartość.długość < 6)
alert („hasło musi mieć 6 znaków”);
form.hasło.centrum();
zwrócić fałsz;
powrót (prawda);
Po napisaniu całego tego kodu, ponownie załaduj stronę, aby zaktualizować kod. Teraz albo zostawiamy puste pole e -mail, albo piszemy wiadomość e -mail mniej niż 10 znaków. W obu przypadkach pokaże błąd „e -mail jest nieodpowiedni”.
W ten sposób możemy zastosować podstawową walidację formularza w JavaScript. Możemy również zastosować sprawdzanie poprawności danych po stronie klienta za pomocą Regex lub pisząc własną funkcję niestandardową. Załóżmy, że chcemy zastosować sprawdzanie poprawności danych w polu e -mail. Regex byłby taki po zatwierdzeniu e -maila.
if (/^[a-za-z0-9.!#$%& '*+/=?^_ '| ~-]+@[a-za-z0-9-]+(?: \.[A-ZA-Z0-9-]+)*$/.test (form.e-mail.wartość))
alert („e -mail jest nieodpowiedni”);
form.e-mail.centrum() ;
zwrócić fałsz;
To była tylko podstawowa demonstracja sprawdzania poprawności danych za pomocą Regex. Ale niebo jest otwarte, abyś latał.
Wniosek
W tym artykule obejmuje podstawową walidację formularza w JavaScript. Próbowaliśmy również i wprowadziliśmy się do sprawdzania poprawności danych za pomocą Regex. Jeśli chcesz dowiedzieć się więcej o Regex, mamy dedykowany artykuł związany z Regex na Linuxhint.com. Aby uczyć się i rozumieć koncepcje JavaScript i bardziej przydatne treści, odwiedzaj Linuxhint.com. Dziękuję!