Web application

Walidacja formularzy w ASP.NET

Dużą rolę w budowie formularzy dla rejestracji, logowań, szybkiego kontaktu, czy systemu komentarzy odgrywa walidacja. Jestto mechanizm, który umożliwia sprawdzenie poprawności wpisywanych danych. Kontrolki w środowisku VS znacznie ułatwiają programistom życie, oferując pełen zestaw narzędzi.

Krótki opis każdej z nich:

1. Compare Validator – porównuje, czy wybrane pola posiadają tą samą zawartość.

2. Costom Validator – umożliwia wprowadzenie własnego, niestandardowego kodu walidacji.

3. Range Validator – sprawdza, czy określona wartość mieści się w wybranym zakresie.

4. Reguar Expression Validator – sprawdza poprawność pól wg zdefiniowanych wymagań.

5. Required Field Validator – wymusza podanie wartości w polu.

6. Validation Summary – podaje podsumowanie walidacji wszystkich pól w formularzu.

W poniższym przykładzie postaram się wykorzystać najważniejsze z nich.

Na początek buduję prosty formularz rejestracyjny. W pierwszym kroku będę chciał wymusić na użytkowniku podanie takich informacji jak e-mail oraz password. Pole name oraz last name pozostawię, jako opcjonalne.

W celu wymuszenia uzupełnienia pola z toolboxa wybieram kontrolkę RequiredFieldValidator i ustawiam ją tuż obok w/w pól. Całość prezentuje się w ten oto sposób:

Teraz musimy powiązać kontrolki oraz wyświetlić stosowny komunikat w przypadku braku danych w wymaganych polach.

To, co będzie nas w głównej mierze interesowało, to właściwości takie jak ErrorMessage oraz ControlToCalidate.

Wlasciwosci Required Field Validator

ErrorMessage to treść, jaka wyświetli się nam w chwili braku danych w wybranym polu. Natomiast ControlToCalidate to wiązanie kontrolki. Tutaj wybieramy, który z textboxsów ma wywoływać zdarzenie.

Po skompilowaniu zobaczymy formularz. Uzupełniłem go częściowo, aby uwidocznić skutek braku uzupełnienia jednego pola. Zgodnie z oczekiwaniami otrzymujemy komunikat o błędzie.

Kolejnym krokiem będzie sprawdzenie, czy wpisane hasła są takie same. Wykorzystamy tutaj Compare Validator. Zastępujemy kontrolkę RequiredFieldValidator znajdującą się obok pola Repeat password na kontrolkę CompareValidator. Kontrolka wymuszająca podanie hasła będzie nam zbędna. Tę role pośrednio przejmie teraz kontrolka porównująca pola. Jeżeli tym razem ktoś wypełni wszystkie pola oprócz powtórnego wpisania hasła, to kontrolka porównania wychwyci nam, że pola hasło i powtórz hasło nie są takie same.

W właściwościach wpisujemy komunikat, jaki ma wyświetlić się nam w chwili pojawienia się błędu. Następnie podajemy kontrolki, jakie będą porównywane. ControlToCompare służy do podania kontrolki, na którą będzie oddziałowane porównanie, natomiast w ControlToValidate podajemy kontrolkę wzorcową.

Efekt?

Jak widać formularz działa jak należy.

Na tym etapie warto ustawić pole TextBoxPassword i TextBoxRePassword tak, aby wpisywane wartości posiadały ukryte znaki. Aby tego dokonać, wystarczy w właściwościach pól odszukać TextMode i ustawić na Password.

Utwórzmy mechanizm sprawdzający, czy użytkownik wpisał poprawny adres mail. Obok pola przeznaczonego na wpisanie adresu mail umieszczamy kontrolkę Reguar Expression Validator. Standardowo w właściwości ControlToValidate wybieramy pole, jakie poddajemy walidacji ale dodatkowo wybieramy właściwość ValidationExpression.

W tym momencie powinno ukazać się nam okienko wyboru wyrażenia regularnego. Istnieją również zdefiniowane wyrażenia. Jednym z nich jest właśnie adres mail. Wybieramy go z listy i zatwierdzamy ok.

Jeżeli chcemy, możemy sami sobie zdefiniować wyrażenie regularne. Istnieje wiele serwisów internetowych, które udostępniają generator. Cała składnia tworzenia wyrażenia jest bardzo rozbudowana, co powoduje, że ręczna budowa może przeciągnąć się w czasie…

Tak jak widać, wpisanie niepoprawnego maila skutkuje pojawieniem się błędu:

Na koniec tego eksperymentu dodajmy kontrolkę Validation Summary. Przeciągamy ją pod nasz formularz.

Wtedy automatycznie ukaże się tekst Error message 1 i 2. Nie trzeba tej kontrolki specjalnie modyfikować. Przechwytuje ona całe działanie formularza. Najłatwiej będzie to ukazać w praktyce.

Tak jak widać, w przypadku pojawienia się błędu, kontrolka ta wyświetla wszystkie zaistniałe błędy w formularzu. Aby jeszcze urozmaicić ten formularz we wszystkich walidatorach oprócz Validation Summary, ustawmy wartość Text na „*” -gwiazdkę. Spowoduje to wyświetlenie gwiazdki w chwili popełnienia błędu, a blog Summary uściśli nam, jaki był to rodzaj błędu. Testujemy. Efekt końcowy:

Co jest w tym ciekawego?

Bez jakichkolwiek umiejętności programowania, dosłownie bez wpisywania żadnej linii kodu, obsłużyliśmy całą walidację formularza. Wykonanie takiej pracy jest bardzo szybkie i intuicyjne.

Oczywiście muszę powiedzieć, ze powyższe działanie było tylko i wyłącznie przykładem. W dostępnych kontrolkach są już gotowe moduły logowania/rejestracji. Powyższy formularz ma tylko i wyłącznie zastosowanie edukacyjne.

Tags:
Show Buttons
Hide Buttons