walidacja po stronie klienta za pomocą jquery oraz angular js
TRANSCRIPT
![Page 1: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/1.jpg)
www.proskar.pl
Walidacja po stronie klienta za
pomocą jQuery oraz AngularJS
Warsztaty PROSKAR
![Page 2: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/2.jpg)
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
![Page 3: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/3.jpg)
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
![Page 4: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/4.jpg)
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
![Page 5: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/5.jpg)
• Czym jest AngularJS
– Biblioteka oparta na JavaScript
– Wspomaga tworzenie aplikacji internetowych na
jednej stronie.
– Używa wzorca MVC
www.proskar.pl 5/24
![Page 6: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/6.jpg)
www.proskar.pl 6/24
• Tworzenie aplikacji internetowych
– Manipulacja drzewem DOM
– Oddzielenie warstwy klienckiej od warstwy
serwerowej
– Implementacja dynamicznych stron internetowych
Zastosowanie - AngularJS
![Page 7: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/7.jpg)
www.proskar.pl 7/24
– Netbeans IDE(lub inny)
– jQuery 1.11.2
– WebStorm (lub inny)
– Biblioteka AngularJS
Co będzie potrzebne?
![Page 8: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/8.jpg)
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
![Page 9: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/9.jpg)
www.proskar.pl 9/24
– Dodanie do projektu frameworka JSF (lub innego)
– Prawy przycisk myszy > Properties > Frameworks > Add > JavaServer Faces > OK.
![Page 10: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/10.jpg)
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
![Page 11: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/11.jpg)
Przykładowa implementacja
www.proskar.pl 11/24
![Page 12: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/12.jpg)
www.proskar.pl 12/24
• Implementacja widoku
– Formularz • Pola tekstowe: Imię, Adres email, Potwierdź adres email
• Przycisk zatwierdzający
Przykładowa implementacja widoku
![Page 13: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/13.jpg)
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
![Page 14: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/14.jpg)
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
![Page 15: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/15.jpg)
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.
![Page 16: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/16.jpg)
www.proskar.pl 16/24
• Skrypt walidujący
– Przykład implementacji skryptu
![Page 17: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/17.jpg)
www.proskar.pl 17/24
• Rezultat
• Wywołanie skryptu
![Page 18: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/18.jpg)
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
![Page 19: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/19.jpg)
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
![Page 20: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/20.jpg)
www.proskar.pl 20/24
• Przykładowa implementacja skryptu
![Page 21: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/21.jpg)
www.proskar.pl 21/24
• Przykładowa implementacja widoku
![Page 22: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/22.jpg)
• Rezultat
www.proskar.pl 22/24
![Page 23: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/23.jpg)
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
![Page 24: Walidacja po stronie klienta za pomocą jquery oraz angular js](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55c53bfdbb61ebae608b45b5/html5/thumbnails/24.jpg)
• 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