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


• Adres email




• ViewScoped


• Klasa CDI


• Adres email




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


Technology

Walidacja po stronie klienta za pomocą jquery oraz angular js