Walidacja to proces zapewniający poprawność i kompletność danych.
W prawdziwym przykładzie załóżmy, że witryna wymaga wypełnienia formularza rejestracyjnego przed uzyskaniem pełnego dostępu do tej witryny. Strona rejestracji zawierałaby pola do wpisania nazwy użytkownika, hasła, identyfikatora e-mail i tak dalej.
Gdy użytkownik przesyła formularz, zwykle najpierw następuje walidacja, zanim szczegóły zostaną wysłane na serwer. Ta walidacja miałaby na celu zapewnienie w najlepszym możliwym stopniu, że szczegóły pól wejściowych są wprowadzane we właściwy sposób.
Na przykład identyfikator e-mail zawsze musi mieć format Ten adres e-mail jest chroniony przed robotami spamującymi. Aby go zobaczyć, konieczne jest włączenie obsługi JavaScript. ; jeśli ktoś wpisze tylko nazwę użytkownika w identyfikatorze e-mail, w idealnym przypadku walidacja zakończy się niepowodzeniem. Tak więc walidacja polega na wykonaniu tych podstawowych kontroli, zanim szczegóły zostaną wysłane na serwer w celu dalszego przetwarzania.
W tym samouczku nauczysz się:
- Walidacja formularzy za pomocą HTML5
- Walidacja formularza za pomocą $ dirty, $ valid, $ invalid, $ pristine
- Walidacja formularza za pomocą AngularJS Auto Validate
- Opinie użytkowników z przyciskami Ladda
Walidacja formularzy za pomocą HTML5
Walidacja formularza to proces wstępnej weryfikacji informacji wprowadzonych w formularzu internetowym przez użytkownika przed wysłaniem ich na serwer. Zawsze lepiej jest zweryfikować informacje po stronie klienta. Dzieje się tak, ponieważ powoduje to mniejsze obciążenie, gdyby użytkownik musiał ponownie otrzymać formularz, jeśli wprowadzone informacje były nieprawidłowe.
Przyjrzyjmy się, jak można przeprowadzić walidację formularzy w HTML5.
W naszym przykładzie pokażemy użytkownikowi jeden prosty formularz rejestracyjny, w którym użytkownik musi wprowadzić takie szczegóły, jak nazwa użytkownika, hasło, identyfikator e-mail i wiek.
Formularz będzie miał kontrole walidacji, aby upewnić się, że użytkownik wprowadzi informacje we właściwy sposób.
Event Registration Guru99 Global Event
Objaśnienie kodu:
- W przypadku wprowadzania tekstu używamy atrybutu „required”. Oznacza to, że pole tekstowe nie może być puste podczas przesyłania formularza, a w polu tekstowym powinien znajdować się jakiś tekst.
- Następnym typem danych wejściowych jest hasło. Ponieważ typ wejścia jest oznaczony jako hasło, gdy użytkownik wpisze dowolny tekst w polu, zostanie on zamaskowany.
- Ponieważ typ wejściowy jest określony jako e-mail, tekst w polu musi pasować do wzorca. Ten adres e-mail jest chroniony przed robotami spamującymi. Aby go zobaczyć, konieczne jest włączenie obsługi JavaScript. .
- Gdy typ wprowadzania jest oznaczony jako liczba, jeśli użytkownik spróbuje wprowadzić dowolny znak za pomocą klawiatury lub alfabetu, nie zostanie on wprowadzony w polu tekstowym.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Aby zobaczyć walidację formularza w akcji, kliknij przycisk Prześlij bez wprowadzania żadnych informacji na ekranie.
Po kliknięciu przycisku przesyłania pojawi się wyskakujące okienko z informacją o błędzie weryfikacji, że pole należy wypełnić.
Tak więc walidacja kontrolki, która została oznaczona jako wymagana, powoduje wyświetlenie komunikatu o błędzie, jeśli użytkownik nie wprowadzi żadnej wartości w polu tekstowym.
Gdy użytkownik wprowadzi dowolną wartość w kontroli hasła, zauważysz symbol „*” używany do maskowania wprowadzanych znaków.
Wprowadźmy więc zły identyfikator e-mail i kliknij przycisk przesyłania. Po kliknięciu przycisku przesyłania pojawi się wyskakujące okienko z informacją o błędzie walidacji, że pole musi mieć symbol @.
Tak więc walidacja formantu, który został oznaczony jako formant poczty e-mail, spowoduje wyświetlenie komunikatu o błędzie, jeśli użytkownik nie wprowadzi prawidłowego identyfikatora e-mail w polu tekstowym.
Wreszcie, gdy spróbujesz wprowadzić jakiekolwiek znaki w kontrolce tekstu wieku, nie zostaną one wprowadzone na ekranie. Kontrolka zapełni wartość tylko wtedy, gdy w kontrolce zostanie wprowadzona liczba.
Walidacja formularza za pomocą $ dirty, $ valid, $ invalid, $ pristine
AngularJS zapewnia dodatkowe właściwości do walidacji. AngularJS udostępnia następujące właściwości kontrolek do celów walidacji
- $ dirty - użytkownik wszedł w interakcję z formantem
- $ valid - zawartość pola jest prawidłowa
- $ invalid - zawartość pola jest nieprawidłowa
- $ pristine - użytkownik nie wszedł jeszcze w interakcję z formantem
Poniżej znajdują się kroki, które należy wykonać, aby przeprowadzić walidację Angular.
Krok 1) Podczas deklarowania formularza użyj właściwości no validate. Ta właściwość informuje HTML5, że walidacja zostanie wykonana przez AngularJS.
Krok 2) Upewnij się, że formularz ma zdefiniowaną nazwę. Powodem tego jest to, że podczas przeprowadzania walidacji Angular zostanie użyta nazwa formularza.
Krok 3) Upewnij się, że każda kontrolka ma również zdefiniowaną nazwę. Powodem tego jest to, że podczas przeprowadzania walidacji Angular zostanie użyta nazwa kontrolki.
Krok 4) Użyj dyrektywy ng-show, aby sprawdzić właściwości $ dirty, $ invalid i $ valid dla kontrolek.
Spójrzmy na przykład, który obejmuje powyższe kroki.
W naszym przykładzie
Będziemy mieć po prostu proste pole tekstowe, w którym użytkownik musi wprowadzić nazwę tematu w polu tekstowym. Jeśli nie zostanie to zrobione, zostanie wyzwolony błąd walidacji, a użytkownikowi zostanie wyświetlony komunikat o błędzie.
Event Registration Guru99 Global Event
Objaśnienie kodu:
- Zauważ, że nadaliśmy formularzowi nazwę „myForm”. Jest to wymagane podczas uzyskiwania dostępu do formantów w formularzu do walidacji AngularJS.
- Użycie właściwości „novalidate” w celu upewnienia się, że formularz HTML umożliwia AngularJS przeprowadzenie walidacji.
- Używamy dyrektywy ng-show do sprawdzania właściwości „$ dirty” i „$ invalid”. Oznacza to, że jeśli pole tekstowe zostało zmodyfikowane, wartość właściwości „$ dirty” będzie miała wartość true. Ponadto w przypadku, gdy wartość pola tekstowego jest zerowa, właściwość „$ invalid” stanie się prawdziwa. Jeśli więc obie właściwości są prawdziwe, weryfikacja nie powiedzie się dla formantu. W związku z tym, jeśli obie wartości są prawdziwe, ng-show również stanie się prawdziwe, a kontrolka zakresu z czerwonymi znakami zostanie wyświetlona.
- W tym przypadku sprawdzamy właściwość „$ error”, która również przyjmuje wartość true, ponieważ wspomnieliśmy, że dla elementu sterującego należy wprowadzić wartość dla elementu sterującego. W takim przypadku, gdy nie ma danych wprowadzonych w polu tekstowym, kontrolka span wyświetli tekst „Wymagana jest nazwa użytkownika”.
- Jeśli wartość kontrolna pola tekstowego jest nieprawidłowa, chcemy również wyłączyć przycisk przesyłania, aby użytkownik nie mógł przesłać formularza. Używamy właściwości „ng-disabled” dla formantu, aby to zrobić na podstawie wartości warunkowej właściwości „$ dirty” i „$ invalid” elementu sterującego.
- W kontrolerze ustawiamy tylko początkową wartość pola tekstowego na tekst „AngularJS”. Robi się to tylko po to, aby ustawić domyślną wartość w polu tekstowym, gdy formularz jest wyświetlany po raz pierwszy. Pokazuje lepiej, jak przebiega walidacja dla pola tekstowego.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Gdy formularz jest wyświetlany po raz pierwszy, w polu tekstowym jest wyświetlana wartość „AngularJS”, a przycisk „Prześlij” jest włączony. Zaraz po usunięciu tekstu z formantu komunikat o błędzie walidacji jest włączony, a przycisk Prześlij jest wyłączony.
Powyższy zrzut ekranu pokazuje dwie rzeczy
- Przycisk Prześlij jest wyłączony
- W polu tekstowym Temat nie ma nazwy tematu. W związku z tym uruchamia komunikat o błędzie „Wymagana jest nazwa użytkownika”.
Walidacja formularza za pomocą AngularJS Auto Validate
AngularJS posiada funkcję automatycznego sprawdzania poprawności wszystkich kontrolek w formularzu, bez konieczności pisania własnego kodu do walidacji. Można to zrobić, dołączając niestandardowy moduł o nazwie „jcs-AutoValidate”.
Dzięki temu modułowi nie musisz umieszczać żadnego specjalnego kodu, aby przeprowadzić walidację lub wyświetlić komunikaty o błędach. Wszystko to jest obsługiwane przez kod wewnątrz JCS-AutoValidate.
Spójrzmy na prosty przykład, jak to osiągnąć.
W tym przykładzie
Będziemy mieć prosty formularz z kontrolką pola tekstowego, która jest polem wymaganym. Jeśli ten element sterujący nie jest wypełniony, powinien zostać wyświetlony komunikat o błędzie.
Event Registration Guru99 Event
Objaśnienie kodu:
- Po pierwsze, musimy dołączyć skrypt „jcs-auto-validate.js”, który ma wszystkie funkcje automatycznego sprawdzania poprawności.
- Musimy upewnić się, że każdy element zawierający „znacznik DIV” jest umieszczony w klasie „form-group”.
- Należy również upewnić się, że każdy element (który jest elementem HTML, takim jak kontrolka wejściowa, kontrolka zakresu, kontrolka DIV itd.), Taki jak kontrolki wejściowe, jest również umieszczony w klasie form-group.
- Dołącz jcs-autovalidate do swojego modułu AngularJS JS.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Domyślnie po uruchomieniu kodu powyższy formularz zostanie wyświetlony zgodnie z kodem HTML.
Jeśli spróbujesz przesłać formularz, pojawi się komunikat o błędzie „To pole jest wymagane”. Wszystko to odbywa się za pomocą opcji JCS-AutoValidate.
Informacje zwrotne użytkownika z przyciskami Ladda
Przyciski „ladda” to specjalna struktura zbudowana dla przycisków na wierzchu JavaScript, aby nadać przyciskom wizualny efekt po ich naciśnięciu.
Więc jeśli przycisk otrzyma atrybut „ladda” i zostanie wciśnięty, pojawi się efekt spinu. Ponadto dla przycisku dostępne są różne style danych, które zapewniają dodatkowe efekty wizualne.
Spójrzmy na przykład, jak zobaczyć przyciski „ladda” w akcji. Zobaczymy tylko prosty formularz z przyciskiem przesyłania. Po naciśnięciu przycisku na przycisku zostanie wyświetlony efekt wirowania.
Event Registration Guru99 Event
Objaśnienie kodu:
- Używamy dyrektywy „ng-submit”, aby wywołać funkcję o nazwie „submit”. Ta funkcja zostanie użyta do zmiany atrybutu ladda przycisku przesyłania.
- Atrybut ladda jest specjalnym atrybutem frameworka ladda. To jest ten atrybut, który dodaje efekt rotacji do kontroli. Ustawiamy wartość atrybutu ladda na przesyłaną zmienną.
- Właściwość stylu danych jest ponownie dodatkowym atrybutem oferowanym przez platformę Ladda, która po prostu dodaje inny efekt wizualny do przycisku przesyłania.
- Aby platforma ladda działała, do aplikacji AngularJS.JS należy dodać moduł „AngularJS-ladda”.
- Początkowo definiujemy i ustawiamy wartość zmiennej o nazwie „przesyłanie” na fałsz. Ta wartość jest ustawiana dla atrybutu ladda przycisku przesyłania. Ustawiając początkowo wartość false, mówimy, że nie chcemy jeszcze, aby przycisk wysyłania miał efekt ladda.
- Deklarujemy funkcję, która jest wywoływana po naciśnięciu przycisku przesyłania. W tej funkcji ustawiamy „przesyłanie” na wartość true. Spowoduje to zastosowanie efektu ladda do przycisku przesyłania.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Gdy formularz jest wyświetlany po raz pierwszy, przycisk przesyłania jest wyświetlany w swojej prostej formie.
Po naciśnięciu przycisku przesyłania zmienna wysyłająca w kontrolerze jest ustawiana na wartość true. Ta wartość jest przekazywana do atrybutu „ladda” przycisku wysyłania, co powoduje efekt obrotu przycisku.
Podsumowanie
- Walidację kontrolek HTML pola tekstowego można przeprowadzić za pomocą atrybutu „required”.
- W HTML5 dodano nowe kontrolki, takie jak hasło, adres e-mail i liczba, które zapewniają własny zestaw walidacji.
- Sprawdzanie poprawności formularza w AngularJS odbywa się poprzez sprawdzenie wartości $ dirty, $ valid, $ invalid i $ pristine kontrolki formularza.
- Automatyczną walidację w aplikacjach AngularJS można również uzyskać za pomocą modułu JCS-auto validate.
- Przyciski Ladda można dodać do aplikacji Angular.js, aby zapewnić użytkownikowi nieco lepsze wrażenia wizualne po naciśnięciu przycisku.