Walidacja formularzy

Jednym ze sposobów kontrolowania danych z formularzy jest stosowanie skryptów działających po stronie serwera (PHP, CGI). Innym sposobem jest kontrolowanie formularzy za pomocą skryptów działających po stronie przeglądarki.
Sprawdzanie poprawności wypełnienia formularza po stronie klienta ma kilka zalet:

1. Informacja o błędzie w wypełnianiu formularza jest zwracana natychmiast, bez konieczności oczekiwania na odpowiedź ze strony serwera.
2. Zmniejszenie obciążenia serwera.

W praktyce sprawdzanie poprawności wypełnienia formularza za pomocą JavaScript nie zwalnia z konieczności sprawdzania poprawności danych po stronie serwera (walidacja danych po stronie serwera zapewnia bezpieczne działanie całej aplikacji).

Walidacja danych polega na sprawdzeniu, czy wszystkie pola formularza zostały wypełnione oraz czy wprowadzone wartości mają odpowiednią postać.

Sprawdzanie wypełnienia pól formularza

Podstawowym działaniem wykonywanym podczas walidacji formularza jest sprawdzenie, czy pola, które nie powinny pozostać puste, zostały przez użytkownika wypełnione. Jeżeli pozostały puste pola, formularz nie zostanie wysłany.

Inny sposób zdefiniowania funkcji Sprawdz() jest wykorzystanie metody getElementById (). Za pomocą poniæszej funkcji Sprawdz_d ( ) można sprawdzić nie tylko, czy pole zostało wypełnione, ale również długość tekstu wprowadzonego do poszczególnych pól.

 

Wyrażenia regularne

Wyrażenia regularne to wzorce opisujące łańcuch symboli. Przy ich użyciu można sprawdzać i modyfikować teksty. Wyrażenia regularne są wykorzystywane do sprawdzania, czy ciągi znaków wprowadzonych do formularza są zgodne z wymaganymi wzorcami.
Język JavaScript ma wbudowane mechanizmy obsługi wyrażeń regularnych. Za ich obsługę odpowiada obiekt RegExp (wzorzec, flaga) . Może on być tworzony na dwa sposoby:

        var nowe_wyr = new RegExp('^[0-9]+[a-z]+$");

        var nowe_wyr = /^[0-9]+[a-z]+$/;

Podane wyżej przykłady są równoznaczne.

Definiowany wzorzec składa się z symboli (znaków specjalnych), które opisują wygląd określonego fragmentu tekstu. Tabela poniżej zawiera opis wybranych symboli.

Drugi parametr obiektu RegExp( ) czyli flaga może wystąpić, ale nie musi.

W języku JavaScript dodatkowo zostały zdefiniowane specjalne klasy znaków. Ich symbole mogą być wykorzystane przy definiowaniu wyrażeń regularnych .

Wzorzec kodu pocztowego

var w_kod = /^[0-9]{2} - [0-9]{3}$/;

Wzorce definiowane w języku JavaScript zaczynają się od znaku / i na nim się kończą. Zapis [0-9] {2} - [0-9]{3} oznacza, że najpierw powinny wystąpić dwie cyfry. Po nich musi wystąpić znak -, a po nim muszą być trzy cyfry.

Inny zapis wzorca dla weryfikacji kodu pocztowego:

var w_kod = /^[d]{2} - [d]{3}$/;

lub

var w_kod = new RegExp('^[0-9]{2}[0-9]{3}$');

Wzorzec do weryfikacji imienia i nazwiska

var w_nazw = /^[a-zA-Z]{2, }s+[a-zA-Z]{2,}$/;

Znak ^ oznacza, że wzorzec zaczyna się od początku tekstu. Zapis [a-zA-Z] {2, } mówi, że ciąg powinien zawierać przynajmniej dwie litery (imię). Zapis s+ oznacza, że dalej powinny być spacje lub tabulatory (przynajmniej jeden). Kolejny zapis [ a- zA-Z] {2, } mówi, że następny ciąg to znowu przynajmniej dwie litery (nazwisko). Znak $ oznacza zakończenie wzorca wraz z końcem tekstu.

Inny zapis wzorca dla weryfikacji imienia i nazwiska:

var w_nazw = /^[D]{2, }s+[D]{2, }$/;

Wzorzec do weryfikacji e-maila

var w_mail = /^[0-9a-zA-Z_.-]+@[0-9a-zA-Z.-]+.[a-zA-Z]{2,3}$/;

Znak ^ oznacza, że wzorzec zaczyna się z początkiem tekstu. Zapis [0-9a-zA-Z_.-] mówi, że nazwa konta może składać się z dowolnych znaków z zakresu cyfr, liter, znaku podkreślenia, kropki i myślnika. Następnie powinien wystąpić znak @. Po tym znaku sprawdzana jest nazwa domeny, która może składać się z dowolnych znaków z zakresu cyfr, liter oraz znaków kropki i myślnika. Zapis . oznacza, że kolejnym znakiem musi być kropka, a zapis [a-zA-Z] {2, 3} mówi, że po kropce musi wystąpić końcowa część nazwy domeny składająca się wyłącznie z liter i jej długość musi wynosić dwa lub trzy znaki. Znak $ oznacza, że wzorzec ma się kończyć wraz z końcem tekstu.

Znając sposoby definiowania wzorców do weryfikacji danych zapisanych w formularzu, można przystąpić do napisania kodu, który będzie weryfikował te dane na stronie internetowej.

 


W podanym przykładzie formularz składa się z dwóch pól: Imię i nazwisko oraz E-mail. Po ich wypełnieniu za pomocą funkcji Spr_wzorzec() następuje sprawdzenie poprawności wprowadzonych danych.

Zerowanie pól formularza

Czyszczenie wypełnionych pól formularza może być realizowane za pomocą metody reset( ) , która powoduje wyzerowanie wszystkich pól formularza.

Zadania

1. Utwórz formularz zawierający pola Imię, Nazwisko, Wiadomość, Pesel, Adres e-mail. Napisz skrypt sprawdzający czy wszystkie pola formularza zostały wypełnione.
2. Dla formularza z zadania nr 1 napisz skrypt sprawdzający długość wprowadzonych danych. Imię i nazwisko powinno mieć przynajmniej 3 znaki, wiadomość 10 znaków, pesel 11 znaków a adres e-mail 8 znaków.
3. Dla formularza z zadania nr 1 napisz skrypt sprawdzający z użyciem wyrażeń regularnych poprawność wprowadzenia danych.