�ݺ�ߣ

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
– Adnotacje
• Named
• ViewScoped
• Klasa CDI
– Trzy pola
• Imię
• Adres email
– Adnotacje
• Named
• ViewScoped

Przykładowa implementacja

• Implementacja widoku
– Formularz
• Pola tekstowe: Imię, Adres email, Potwierdź adres email
• Przycisk zatwierdzający
Przykładowa implementacja widoku

• 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

• Skrypt walidujący
– Wymagania
• Pole Imię
– Nie może być puste
• Pole Adres email
– Musi pasować do regexa [a-z0-9_.-]+@[a-z0-9_.-]+.w{2,4}
• Pole Potwierdź adres email
– Wartość musi być taka sama co w polu Adres email

– 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ść
• 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

– Przykład implementacji skryptu

• Rezultat
• Wywołanie skryptu

• 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

• 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

• Przykładowa implementacja skryptu

• Przykładowa implementacja widoku

• Rezultat

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

• 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)

�ݺ�ߣ

Walidacja po stronie klienta za pomocą jquery oraz angular js

Recommended

More Related Content

More from PROSKAR (10)

Walidacja po stronie klienta za pomocą jquery oraz angular js