Walidacja po stronie klienta za pomocą jquery oraz angular js
-
Upload
proskar -
Category
Technology
-
view
202 -
download
0
Transcript of Walidacja po stronie klienta za pomocą jquery oraz angular js
www.proskar.pl
Walidacja po stronie klienta za
pomocą jQuery oraz AngularJS
Warsztaty PROSKAR
Plan
1. Wstęp
2. Co będzie potrzebne?
3. Tworzenie projektu i konfiguracja – jQuery
4. Implementacja – jQuery
5. Tworzenie projektu i konfiguracja – AngularJS
6. Implementacja – AngularJS
7. Podsumowanie
www.proskar.pl 2/24
Wstęp
• Czym jest jQuery
– Biblioteka oparta na JavaScript
– Umożliwia szybką i łatwą implementacje skryptów
– W prosty sposób manipuluje drzewem DOM
www.proskar.pl 3/24
www.proskar.pl 4/24
• Tworzenie stron internetowych używających
JavaScript
– Walidacja po stronie klienta
– Obsługa multimediów
– Zapytania Ajax
– Manipulacja drzewa DOM
– itd..
Zastosowanie - jQuery
• Czym jest AngularJS
– Biblioteka oparta na JavaScript
– Wspomaga tworzenie aplikacji internetowych na
jednej stronie.
– Używa wzorca MVC
www.proskar.pl 5/24
www.proskar.pl 6/24
• Tworzenie aplikacji internetowych
– Manipulacja drzewem DOM
– Oddzielenie warstwy klienckiej od warstwy
serwerowej
– Implementacja dynamicznych stron internetowych
Zastosowanie - AngularJS
www.proskar.pl 7/24
– Netbeans IDE(lub inny)
– jQuery 1.11.2
– WebStorm (lub inny)
– Biblioteka AngularJS
Co będzie potrzebne?
www.proskar.pl 8/24
• File > New Project > Maven > WebApplication
• Dodanie implementacji biblioteki jQuery
– http://jquery.com/download/
– Ścieżka resources/css
Tworzenie projektu i
konfiguracja - jQuery
Przykładowa struktura projektu
www.proskar.pl 9/24
– Dodanie do projektu frameworka JSF (lub innego)
– Prawy przycisk myszy > Properties > Frameworks > Add > JavaServer Faces > OK.
www.proskar.pl 10/24
• Klasa CDI
– Trzy pola • Imię
• Adres email
• Potwierdzanie adresu email
– Metoda Submit zwracająca wartość null
– Adnotacje • Named
• ViewScoped
– Metody get / set
Implementacja - jQuery
• Klasa CDI
– Trzy pola • Imię
• Adres email
• Potwierdzanie adresu email
– Metoda Submit zwracająca wartość null
– Adnotacje • Named
• ViewScoped
– Metody get / set
• Klasa CDI
– Trzy pola • Imię
• Adres email
• Potwierdzanie adresu email
– Metoda Submit zwracająca wartość null
– Adnotacje • Named
• ViewScoped
– Metody get / set
Przykładowa implementacja
www.proskar.pl 11/24
www.proskar.pl 12/24
• Implementacja widoku
– Formularz • Pola tekstowe: Imię, Adres email, Potwierdź adres email
• Przycisk zatwierdzający
Przykładowa implementacja widoku
www.proskar.pl 13/24
• Style pól tekstowych
– Kolor zielony – dane poprawne
– Kolor czerwony – dane niepoprawne
• Pliki .css należy umieszczać w katalogu resources
Przykładowe style dla pól tekstowych
www.proskar.pl 14/24
• Skrypt walidujący
– Wymagania • Pole Imię
– Nie może być puste
• Pole Adres email
– Nie może być puste
– Musi pasować do regexa [a-z0-9_.-]+@[a-z0-9_.-]+\.\w{2,4}
• Pole Potwierdź adres email
– Nie może być puste
– Wartość musi być taka sama co w polu Adres email
www.proskar.pl 15/24
• Skrypt walidujący
– Sposób walidacji • Czy nie jest pusta?
– Sprawdzenie czy znajdują się pola bez wartości
» Zmiana stylu na error gdy pole nie ma wartości
» W przeciwnym wypadku zmiana stylu na ok.
• Czy wartość pola zgadza się z regex’em?
– Stworzenie obiektu RegExp definiującego regex’a
– Sprawdzenie czy wartość jest prawidłowa za pomocą metody test
» Zmiana stylu na error gdy pole ma niepoprawna wartość
» W przeciwnym wypadku zmiana stylu na ok.
• Czy wartość wpisana do pola Potwierdź adres email jest taka sama co podana w polu Email
– Sprawdzenie czy wartości są takie same
» Zmiana stylu na error gdy wartości są różne
» W przeciwnym wypadku zmiana stylu na ok.
www.proskar.pl 16/24
• Skrypt walidujący
– Przykład implementacji skryptu
www.proskar.pl 17/24
• Rezultat
• Wywołanie skryptu
www.proskar.pl 18/24
• File > New Project > Ok
• Dodanie biblioteki AngularJS
– Stworzenie nowego pliku .html
– Dodanie w nowym dokumencie biblioteki za pomocą tagu script
Tworzenie projektu i
konfiguracja - AngularJS
www.proskar.pl 19/24
• Implementacja widoku
– Formularz • Pole tekstowe – Liczba od 0 do 10
• Pole tekstowe – Email
• Pole tekstowe – Kod pocztowy
• Walidacja
– Pole tekstowe – Liczba od 0 do 10 • Wartość musi być liczbą od 0 do 10
– Pole tekstowe – Email • Musi zgadzać się z podanym regex’em
– Pole tekstowe – Kod pocztowy • Musi zgadzać się z podanym regex’em
Implementacja - AngularJS
www.proskar.pl 20/24
• Przykładowa implementacja skryptu
www.proskar.pl 21/24
• Przykładowa implementacja widoku
• Rezultat
www.proskar.pl 22/24
Podsumowanie
• jQuery
– Może być używany z frameworkami przeznaczonymi do tworzenia warstwy widoku np. JSF
– Prosty sposób na manipulacje drzewem DOM
– Prosty interfejs realizujący asynchroniczne zapytania AJAX
www.proskar.pl 23/24
• AngularJS
– Umożliwia tworzenie dynamicznych stron internetowych
– Używany do tworzenia warstwy webowej w aplikacjach internetowych
– Do komunikacji z logiką aplikacji wymaga odpowiednich technologii (WebService, Rest)
www.proskar.pl 24/24