Walidacja formularza AngularJS po przesłaniu: przykład rejestracji
Jamesa Hartmana
Walidacja formularzy w AngularJS
Walidacja formularza w AngularJS jest procesem upewniania się, czy dane wprowadzone do formularza są poprawne i kompletne. Gdy użytkownik przesyła formularz, walidacja następuje najpierw, zanim szczegóły zostaną wysłane do serwera. Proces walidacji zapewnia w najlepszym możliwym zakresie, że szczegóły dla pól wejściowych są wprowadzane w prawidłowy sposób.
W przykładzie ze świata rzeczywistego załóżmy, że strona wymaga wypełnienia formularza rejestracyjnego przed uzyskaniem pełnego dostępu do tej strony. Strona rejestracyjna miałaby pola wprowadzania nazwy użytkownika, hasła, identyfikatora e-mail itd.
Na przykład adres e-mail zawsze musi być w formacie nazwa użytkownika@strona.domena; jeśli ktoś wprowadzi tylko nazwę użytkownika w identyfikatorze e-mail, w idealnym przypadku walidacja powinna się nie powieść. Tak więc walidacja polega na wykonaniu tych podstawowych sprawdzeń przed wysłaniem danych do serwera w celu dalszego przetworzenia.
Walidacja formularza przy użyciu 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 dlatego, że powoduje to mniejsze obciążenie w przypadku konieczności ponownego wyświetlenia formularza użytkownikowi w przypadku, gdy wprowadzone informacje są błędne.
Przyjrzyjmy się, jak można przeprowadzić walidację formularzy AngularJS w HTML5.
W naszym przykładzie pokażemy użytkownikowi jeden prosty formularz rejestracyjny, w którym użytkownik musi wprowadzić takie dane, jak nazwa użytkownika, hasło, adres e-mail i wiek.
Formularz będzie wyposażony w mechanizmy sprawdzające, które pozwolą upewnić się, że użytkownik wprowadził informacje we właściwy sposób.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Objaśnienie kodu
- W przypadku typu wprowadzania tekstu używamy atrybutu 'required'. Oznacza to, że pole tekstowe nie może być puste, gdy formularz jest przesyłany, a w polu tekstowym powinien znajdować się jakiś tekst.
- Następnym typem danych wejściowych jest hasło. Ponieważ typ wprowadzania jest oznaczony jako hasło, gdy użytkownik wprowadzi dowolny tekst w polu, zostanie on zamaskowany.
- Ponieważ typ danych wejściowych określono jako e-mail, tekst w polu musi być zgodny ze wzorcem nazwa@witryna.domena.
- Gdy typ danych wejściowych jest oznaczony jako liczba, próba wprowadzenia przez użytkownika dowolnego znaku za pomocą klawiatury lub alfabetu nie spowoduje wpisania go w polu tekstowym.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik w celu walidacji formularza AngularJS podczas przesyłania.
Wydajność
Aby zobaczyć weryfikację formularza w akcji, kliknij przycisk Wyślij bez wprowadzania żadnych informacji na ekranie.
Po kliknięciu przycisku „Wyślij” pojawi się okno dialogowe z błędem weryfikacji informujące o konieczności wypełnienia pola.
Zatem 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 jakąkolwiek wartość w polu kontroli hasła, zauważysz symbol „*” używany do maskowania wprowadzanych znaków.
Wprowadźmy zatem błędny adres e-mail i kliknijmy przycisk Submit. Po kliknięciu przycisku Submit pojawi się okno pop-up z błędem walidacji, że pole musi mieć symbol @.
Tak więc walidacja kontrolki oznaczonej jako kontrolka 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 zostanie wypełniona wartością 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 zapewnia następujące właściwości dla kontrolek do celów walidacji
- $brudne – Użytkownik wszedł w interakcję z kontrolką
- $ważne – Zawartość pola jest prawidłowa
- $nieprawidłowy – Zawartość pola jest nieprawidłowa
- $nieskazitelny – Użytkownik nie wszedł jeszcze w interakcję z kontrolką
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 valid. Ta właściwość informuje HTML5, że weryfikacja zostanie przeprowadzona przez AngularJS.
Krok 2) Upewnij się, że formularz ma zdefiniowaną nazwę. Powodem tego jest to, że podczas sprawdzania poprawności Angulara zostanie użyta nazwa formularza.
Krok 3) Upewnij się, że każda kontrolka ma również zdefiniowaną nazwę. Powodem tego jest to, że podczas sprawdzania poprawności Angulara zostanie użyta nazwa kontrolki.
Krok 4) Użyj ng-pokaż dyrektywa sprawdzająca właściwości $dirty, $invalid i $valid 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 wpisać nazwę tematu w polu tekstowym. Jeśli tego nie zrobimy, zostanie wywołany błąd walidacji, a użytkownikowi zostanie wyświetlony komunikat o błędzie.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Objaśnienie kodu
- Pamiętaj, że nadaliśmy nazwę formularzowi „myForm”. Jest to wymagane podczas uzyskiwania dostępu do elementów sterujących formularza w celu sprawdzenia poprawności AngularJS.
- Użycie właściwości „novalidate” w celu upewnienia się, że formularz HTML pozwala AngularJS na przeprowadzenie walidacji.
- Używamy dyrektywy ng-show, aby sprawdzić 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 równa true. Ponadto, w przypadku gdy wartość pola tekstowego jest równa null, właściwość „$invalid” stanie się true. Tak więc, jeśli obie właściwości są prawdziwe, walidacja nie powiedzie się dla kontrolki. Zatem, jeśli obie wartości są prawdziwe, ng-show również stanie się true, a kontrolka span ze znakami w kolorze czerwonym zostanie wyświetlona.
- W tym przypadku sprawdzamy właściwość „$error”, która również jest oceniana jako true, ponieważ wspomnieliśmy dla kontrolki, że wartość powinna zostać wprowadzona dla kontrolki. W takim przypadku, gdy w polu tekstowym nie ma żadnych danych, kontrolka span wyświetli tekst „Nazwa użytkownika jest wymagana”.
- Jeśli wartość kontrolki textbox jest nieprawidłowa, chcemy również wyłączyć przycisk Submit, aby użytkownik nie mógł wysłać formularza. Używamy właściwości „ng-disabled” dla kontrolki, aby to zrobić na podstawie wartości warunkowej właściwości „$dirty” i „$invalid” kontrolki.
- W kontrolerze ustawiamy po prostu wartość początkową pola tekstowego na tekst „AngularJS”. Robimy to po prostu, aby ustawić jakąś domyślną wartość pola tekstowego, gdy formularz jest wyświetlany po raz pierwszy. Lepiej pokazuje to, jak przebiega walidacja pola tekstowego.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wydajność
Gdy formularz jest wyświetlany po raz pierwszy, pole tekstowe wyświetla wartość „AngularJS”, a „przycisk Submit” jest włączony. Gdy tylko usuniesz tekst z kontrolki, komunikat o błędzie walidacji jest włączony, a przycisk Submit jest wyłączony.
Powyższy zrzut ekranu przedstawia dwie rzeczy
- Przycisk Wyślij jest wyłączony
- W polu tekstowym Temat nie ma nazwy tematu. Dlatego pojawia się komunikat o błędzie „Nazwa użytkownika jest wymagana”.
Walidacja formularza za pomocą AngularJS Auto Validate
W AngularJS dostępna jest funkcja automatycznego sprawdzania poprawności wszystkich kontrolek w formularzu bez konieczności pisania niestandardowego kodu w celu sprawdzenia poprawności. Można to zrobić, włą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 ta kontrolka nie zostanie wypełniona, powinien zostać wyświetlony komunikat o błędzie.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Objaśnienie kodu
- Najpierw musimy dołączyć skrypt „jcs-auto-validate.js”, który ma wszystkie funkcje automatycznej walidacji.
- Musimy upewnić się, że każdy element, w tym „tag div”, jest umieszczony w klasie „form-group”.
- Należy również upewnić się, że każdy element (który jest elementem HTML, takim jak kontrola wejścia, kontrola zakresu, kontrola div itd.), taki jak kontrolki wejściowe, jest również umieszczony w klasie grupy formularzy.
- Dołącz jcs-autovalidate do swojego modułu AngularJS JS.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wydajność
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 od użytkowników za pomocą przycisków Ladda
Przyciski „ladda” to specjalna struktura zbudowana dla przycisków znajdujących się na wierzchu JAVASCRIPT aby nadać przyciskom efekt wizualny po ich naciśnięciu.
Jeśli zatem przyciskowi zostanie nadana atrybut „ladda” i zostanie naciśnięty, wyświetlony zostanie efekt wirowania. Dla przycisku dostępne są także różne style danych, zapewniające dodatkowe efekty wizualne.
Spójrzmy na przykład, jak zobaczyć przyciski „ladda” w akcji. Zobaczymy prosty formularz z przyciskiem przesyłania. Po naciśnięciu przycisku na przycisku pojawi się efekt wirowania.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Objaśnienie kodu
- Używamy „ng-prześlij” dyrektywa wywołująca funkcję o nazwie „prześlij”. Ta funkcja zostanie użyta do zmiany atrybutu ladda przycisku przesyłania.
- Atrybut ladda jest specjalnym atrybutem frameworka ladda. Jest to ten atrybut, który dodaje efekt wirowania do kontroli. Ustawiamy wartość atrybutu ladda dla zmiennej przesyłającej.
- Właściwość data-style jest ponownie dodatkowym atrybutem oferowanym przez framework ladda, który po prostu dodaje inny efekt wizualny do przycisku przesyłania.
- Aby framework ladda mógł działać, do aplikacji AngularJS.JS należy dodać moduł „AngularJS-ladda”.
- Początkowo definiujemy i ustawiamy wartość zmiennej zwanej „przesyłaniem” na wartość fałszywą. Ta wartość jest ustawiana dla atrybutu ladda przycisku przesyłania. Ustawiając początkowo wartość false, mówimy, że nie chcemy, aby przycisk przesyłania miał na razie efekt ladda.
- Deklarujemy funkcję, która zostanie wywołana po naciśnięciu przycisku przesyłania. W tej funkcji ustawiamy „przesyłanie” na true. Spowoduje to zastosowanie efektu ladda do przycisku przesyłania.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wydajność
Gdy formularz zostanie wyświetlony po raz pierwszy, przycisk „Prześlij” będzie widoczny w swojej prostej formie.
Po naciśnięciu przycisku przesyłania zmienna przesyłania w kontrolerze zostaje ustawiona na wartość true. Ta wartość jest przekazywana do atrybutu „ladda” przycisku przesył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 numer, które zapewniają własny zestaw walidacji.
- Walidacja formularzy w AngularJS odbywa się poprzez sprawdzenie wartości $dirty, $valid, $invalid i $pristine kontrolki formularza.
- Automatyczną walidację w aplikacjach AngularJS można również osiągnąć za pomocą modułu JCS-auto validation.
- Przyciski Ladda można dodać do aplikacji Angular.js, aby zapewnić użytkownikowi nieco lepsze wrażenia wizualne po naciśnięciu przycisku.