Walidacja formularza AngularJS przy przesyƂaniu: $dirty, $valid i $invalid

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Walidacja formularzy w AngularJS sprawdza, czy dane wprowadzone do formularza są poprawne i kompletne, zanim dotrą do serwera. W tym artykule omówione są cztery podejƛcia, od prostych atrybutów HTML5, przez wƂaƛciwoƛci zakresu, po moduƂy automatycznej walidacji.

  • đŸ§© Atrybuty HTML5: Wymagany atrybut oraz pola wprowadzania adresu e-mail, hasƂa i liczb zapewniają przeprowadzanie kontroli w przeglądarce bez koniecznoƛci uĆŒywania skryptĂłw.
  • 🔍 WƂaƛciwoƛci stanu: AngularJS udostępnia $dirty, $pristine, $valid i $invalid dla kaĆŒdego nazwanego elementu wewnątrz nazwanego formularza.
  • đŸ·ïž Wymagania dotyczące nazewnictwa: ZarĂłwno formularz, jak i kaĆŒda kontrolka muszą mieć atrybut nazwy, poniewaĆŒ stan walidacji jest adresowany jako formName.controlName.
  • ???? Blokuj natywne wyskakujące okienka: Dodanie novalidate do formularza zatrzymuje przechwytywanie przesyƂania przez przeglądarkę, dzięki czemu AngularJS moĆŒe się tym zająć.
  • 💬 Wyƛwietlanie wiadomoƛci: ModuƂ ngMessages zastępuje dyrektywy ng-show i wyƛwietla jeden bƂąd na raz, zgodnie z kolejnoƛcią priorytetĂłw.
  • ⚙ Automatyczna walidacja: ModuƂ jcs-autoValidate generuje komunikaty o bƂędach dla kaĆŒdej kontrolki bez ĆŒadnych niestandardowych znacznikĂłw.
  • 🔘 Opinie na temat przesƂania: Przycisk Ladda wƂącza ikonę w trakcie przesyƂania zgƂoszenia, informując uĆŒytkownika o postępie.
Czytaj więcej

Walidacja formularzy w AngularJS

Walidacja formularza W AngularJS proces ten sprawdza, czy dane wprowadzone do formularza są poprawne i kompletne. Gdy uĆŒytkownik przesyƂa formularz, walidacja odbywa się najpierw, zanim dane zostaną przesƂane na serwer. Proces walidacji zapewnia, w jak największym stopniu, ĆŒe pola wejƛciowe zostaƂy wypeƂnione prawidƂowo.

W przykƂadzie z ĆŒycia wziętym, zaĆ‚ĂłĆŒmy, ĆŒe strona wymaga wypeƂnienia formularza rejestracyjnego przed udzieleniem peƂnego dostępu. Strona rejestracyjna zawieraƂaby pola wprowadzania nazwy uĆŒytkownika, hasƂa, adresu e-mail itd.

Na przykƂad adres e-mail zawsze musi być w formacie nazwa uĆŒytkownika@strona.domenaJeƛli ktoƛ wprowadzi tylko nazwę uĆŒytkownika, walidacja powinna zakoƄczyć się niepowodzeniem. Walidacja przeprowadza te podstawowe sprawdzenia przed wysƂaniem danych na serwer w celu dalszego przetworzenia.

⚠ Uwaga dotycząca wersji: AngularJS (odmiana 1.x) zakoƄczyƂ wsparcie techniczne 31 grudnia 2021 roku i nie otrzymuje juĆŒ ĆŒadnych poprawek bezpieczeƄstwa. PoniĆŒsze techniki pozostają poprawne dla starszych aplikacji; wspóƂczesny Angular radzi sobie z tym samym zadaniem w przypadku formularzy opartych na szablonach lub reaktywnych.

Walidacja formularza przy uĆŒyciu HTML5

Walidacja formularza to proces wstępnej walidacji informacji wprowadzonych do formularza internetowego przed ich wysƂaniem na serwer. Walidacja po stronie klienta jest preferowana, poniewaĆŒ wiÄ…ĆŒe się z duĆŒo mniejszym obciÄ…ĆŒeniem niĆŒ ponowne wyƛwietlanie formularza po kaĆŒdej prĂłbie.

PoniĆŒszy przykƂad przedstawia prosty formularz rejestracyjny, w ktĂłrym uĆŒytkownik wprowadza nazwę uĆŒytkownika, hasƂo, adres e-mail i wiek. Formularz zawiera mechanizmy kontroli poprawnoƛci, ktĂłre zapewniają poprawne wprowadzenie danych.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠ Wprowadzono poprawki do kaĆŒdego wpisu na tej stronie. OryginaƂy zadeklarowane chrset="UTF 8", ktĂłry nie jest ani prawidƂowym atrybutem, ani prawidƂowym kodowaniem i zaƂadowaƂ AngularJS trzy razy — angular-route.js po pierwsze, co powoduje bƂąd, poniewaĆŒ moduƂ trasy rejestruje się w ramach, ktĂłre nie zostaƂo zaƂadowane, a następnie angular.min.js oraz angular.js, ta sama biblioteka dwa razy. Wyciągnęli teĆŒ bootstrap.css przez <script> tag, więc ĆŒaden styl nie zostaƂ zastosowany. KaĆŒdy wpis Ƃaduje teraz jedną bibliotekę w wersji 1.8.3 i poprawnie Ƃączy arkusz stylĂłw. WypeƂnienie ukƂadu zbudowane z powtarzających się &nbsp; jednostki zostaƂy usunięte.

Code Wyjaƛnienie

  1. W przypadku wprowadzania tekstu required Atrybut ten oznacza, ĆŒe ​​pole tekstowe nie moĆŒe być puste w momencie wysyƂania formularza.
  2. Następnym typem danych wejƛciowych jest hasƂo. PoniewaĆŒ typ jest oznaczony jako hasƂo, tekst wprowadzany w polu jest maskowany.
  3. PoniewaĆŒ typ danych wejƛciowych okreƛlono jako e-mail, tekst w polu musi być zgodny ze wzorcem nazwa@witryna.domena.
  4. Jeƛli typ danych wejƛciowych jest oznaczony jako liczba, znaki wpisywane z klawiatury po prostu nie są akceptowane przez pole.

Wydajnoƛć

Aby zobaczyć walidację w akcji, kliknij Przeƛlij bez wprowadzania ĆŒadnych danych.

Pojawia się okno dialogowe informujące, ĆŒe pole musi zostać wypeƂnione, więc kontrolka oznaczona jako wymagana blokuje przesƂanie, gdy pole pozostanie puste.

Wprowadzenie wartoƛci w polu hasƂa powoduje wyƛwietlenie symbolu „*” maskującego znaki.

Podanie nieprawidƂowego adresu e-mail i kliknięcie przycisku „Przeƛlij” powoduje wyƛwietlenie okna z proƛbą o wpisanie symbolu @. Ostatecznie znaki wpisane w polu „Wiek” nigdy się nie pojawiają, poniewaĆŒ pole akceptuje tylko cyfry.

Wyskakujące okienka w przeglądarce są szybkie w konfiguracji, ale ich treƛć i styl nie mogą zostać zmienione. Tutaj rolę odgrywają wƂaƛciwoƛci walidacyjne AngularJS.

Nie przegap:

Walidacja formularza za pomocą $dirty, $valid, $invalid, $pristine

angularjs dostarcza wƂasne wƂaƛciwoƛci do walidacji. Następujące wƂaƛciwoƛci są udostępniane dla kaĆŒdej nazwanej kontrolki:

  • $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 przedstawiono kroki umoĆŒliwiające przeprowadzenie walidacji AngularJS.

Krok 1) UĆŒyj novalidate WƂaƛciwoƛć ta jest uĆŒywana podczas deklarowania formularza. Informuje ona przeglądarkę, ĆŒe walidacją zajmie się AngularJS.

Krok 2) Upewnij się, ĆŒe formularz ma zdefiniowaną nazwę, poniewaĆŒ nazwa ta jest uĆŒywana do osiągnięcia stanu walidacji.

Krok 3) Upewnij się, ĆŒe kaĆŒdy element sterujący ma rĂłwnieĆŒ name atrybut, z tego samego powodu. Kontrolka bez nazwy nigdy nie jest rejestrowana w formularzu.

Krok 4) UĆŒyj ng-pokaĆŒ Dyrektywa sprawdzająca wƂaƛciwoƛci $dirty, $invalid i $valid.

PoniĆŒszy przykƂad zawiera pojedyncze pole tekstowe, w ktĂłrym uĆŒytkownik wpisuje nazwę tematu. Jeƛli pole pozostanie puste, wygenerowany zostanie bƂąd walidacji i wyƛwietlony zostanie komunikat.

<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.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠ Poprawiono dwa bƂędy logiczne. OryginaƂ wyƂączyƂ przycisk za pomocą ng-disabled="myForm.user.$dirty && myForm.user.$invalid", Bo $dirty jest faƂszywe, dopĂłki uĆŒytkownik nie dotknie pola, przycisk pozostaje wciƛnięty wƂączony na nienaruszonym, pustym formularzu, dokƂadnie w tym przypadku, w ktĂłrym miaƂ zostać zablokowany; myForm.$invalid obejmuje oba. OryginaƂ zawieraƂ rĂłwnieĆŒ wartoƛć domyƛlną $scope.Display = function () { $scope.user = 'Angular'; }, funkcja nigdy nie zostaƂa wywoƂana, więc pole tekstowe otworzyƂo się puste, mimo ĆŒe w tekƛcie widniaƂ napis „AngularJS”. Przypisanie jest teraz wykonywane bezpoƛrednio, z wartoƛcią w cudzysƂowie.

Code Wyjaƛnienie

  1. Formularzowi nadano nazwę „myForm”. Jest to wymagane w celu uzyskania dostępu do jego elementów sterujących w celu walidacji.
  2. novalidate WƂaƛciwoƛć zatrzymuje sprawdzanie poprawnoƛci przez przeglądarkę, więc AngularJS moĆŒe to zrobić zamiast niej.
  3. Dyrektywa ng-show sprawdza wƂaƛciwoƛci „$dirty” i „$invalid”. Jeƛli pole tekstowe zostaƂo zmodyfikowane, $dirty ma wartoƛć true; jeƛli jego wartoƛć jest pusta, $invalid ma wartoƛć true. Gdy obie wartoƛci mają wartoƛć true, wyƛwietlany jest obszar span z czerwonym tekstem.
  4. ZagnieĆŒdĆŒone sprawdzenie odczytuje wƂaƛciwoƛć „$error.required”, ktĂłra ma wartoƛć true, jeƛli wymagany element sterujący nie ma wartoƛci, i wyƛwietla komunikat „Nazwa uĆŒytkownika jest wymagana”.
  5. Przycisk Wyƛlij jest wyƂączony przez ng-disabled jeƛli formularz jako caƂoƛć jest niewaĆŒny.
  6. Kontroler ustawia początkową wartoƛć pola tekstowego na „AngularJS”, dzięki czemu formularz otwiera się w prawidƂowym stanie, a walidację Ƃatwiej obserwować, gdy tekst zostaje usunięty.

Wydajnoƛć

Po pierwszym wyƛwietleniu formularza w polu tekstowym pojawia się napis „AngularJS”, a przycisk „Wyƛlij” jest aktywny. Po usunięciu tekstu pojawia się komunikat o bƂędzie, a przycisk jest nieaktywny.

Zrzut ekranu powyĆŒej pokazuje dwie rzeczy:

  • Przycisk „Wyƛlij” jest wyƂączony
  • W polu tekstowym Temat nie ma nazwy tematu, dlatego wyƛwietla się komunikat o bƂędzie „Nazwa uĆŒytkownika jest wymagana”

Jak wyƛwietlić bƂędy walidacji za pomocą ngMessages

PowyĆŒszy wzĂłr dziaƂa, ale nie jest skalowalny. Pole z czterema ograniczeniami wymaga czterech zagnieĆŒdĆŒonych ng-show rozpiętoƛci, a gdy kilka z nich zawiedzie jednoczeƛnie, wszystkie wiadomoƛci pojawiają się razem. ngMessages ModuƂ, dostarczany oddzielnie przez zespóƂ AngularJS, rozwiązuje oba problemy: wyƛwietla jedną wiadomoƛć na raz, w kolejnoƛci, w jakiej zostaƂy napisane.

ZaƂaduj moduƂ i dodaj go jako zaleĆŒnoƛć.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

W takim przypadku znaczniki są traktowane jako lista reguƂ, a nie jako stos warunków.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Trzy szczegóƂy sprawiają, ĆŒe w praktyce sprawdza się to dobrze. ng-messages punkty atrybutĂłw w kontrolce $error obiekt, a nie wartoƛć logiczna, więc ĆŒaden warunek nie musi być powtarzany. Tylko pierwsze pasujące ng-message renderuje, co oznacza, ĆŒe ​​puste pole zgƂasza, ĆŒe ​​jest wymagane, zamiast dodatkowo narzekać na jego dƂugoƛć. Dodawanie ng-messages-multiple odwraca to zachowanie, gdy kaĆŒda awaria naprawdę musi zostać wymieniona.

OwiƄping blok w ng-if="myForm.user.$dirty" utrzymuje formularz w stanie wyciszenia, dopĂłki uĆŒytkownik nie wpisze czegoƛ. Zastąpienie $touched dla $dirty opĂłĆșnia przesƂanie wiadomoƛci do momentu, aĆŒ fokus opuƛci pole, co jest zazwyczaj wygodniejszym wyborem w przypadku dƂugiego formularza rejestracyjnego.

Jedno zastrzeĆŒenie: ngMessages jest dostarczany jako osobny plik, więc zapomnienie znacznika skryptu lub zaleĆŒnoƛci moduƂu spowoduje, ĆŒe blok nie będzie generowaƂ niczego, a w konsoli nie pojawi się ĆŒaden bƂąd objaƛniający ten fakt.

Pisanie wiadomoƛci ręcznie jest precyzyjne, ale powtarzalne. W następnej sekcji omówimy moduƂ, który generuje je automatycznie.

Walidacja formularza za pomocą AngularJS Auto Validate

AngularJS moĆŒe automatycznie walidować wszystkie kontrolki w formularzu, bez koniecznoƛci uĆŒywania niestandardowego kodu do walidacji i wyƛwietlania komunikatĂłw o bƂędach. Odbywa się to poprzez doƂączenie moduƂu spoƂecznoƛciowego o nazwie „jcs-autoValidate”.

Dzięki temu moduƂowi nie jest potrzebny ĆŒaden specjalny kod do uruchomienia walidacji lub wyƛwietlenia komunikatĂłw; wszystkim zajmuje się moduƂ jcs-autoValidate.

PoniĆŒszy przykƂad przedstawia prosty formularz z jednym wymaganym polem tekstowym. Jeƛli kontrolka nie zostanie wypeƂniona, wyƛwietlany jest komunikat o bƂędzie.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠ Poprawka: oryginaƂ zidentyfikowaƂ kontrolę za pomocą id="user" tylko. jcs-autoValidate dociera do kontrolki przez formularz, więc name Atrybut jest obowiązkowy i wiadomoƛć nigdy nie pojawiaƂa się bez niego. OryginaƂ zaƂadowaƂ rĂłwnieĆŒ dwie rĂłĆŒne wersje AngularJS: 1.6.4 z Google CDN obok 1.6.9 i nigdy nie poƂączony Bootstrap chociaĆŒ przykƂad zaleĆŒy od jego form-group oraz form-control klasy do pozycjonowania tekstu bƂędu.

💡 Uwaga: jcs-autoValidate to projekt spoƂecznoƛciowy, ktĂłry nie jest juĆŒ aktywnie utrzymywany. Nadal moĆŒna go uĆŒywać w istniejących aplikacjach AngularJS, ale wbudowana ngMessages podejƛcie pokazane wczeƛniej jest bezpieczniejszym wyborem w przypadku wszystkiego, co nowe.

Code Wyjaƛnienie

  1. DoƂączono skrypt „jcs-auto-validate.js”, który zawiera wszystkie funkcje automatycznej walidacji.
  2. KaĆŒdy element sterujący i otaczający go element div umieszczane są wewnątrz klasy „form-group”, do ktĂłrej moduƂ wstrzykuje swĂłj komunikat.
  3. Kontrolka zawiera zarĂłwno identyfikator, jak i name, Bootstrap dostarcza form-control stylizacja.
  4. ModuƂ „jcs-autoValidate” jest wymieniony jako zaleĆŒnoƛć moduƂu AngularJS.

Wydajnoƛć

Domyƛlnie formularz jest renderowany dokƂadnie tak, jak zostaƂ napisany.

Po przesƂaniu pustego formularza pojawia się komunikat „To pole jest wymagane”, wygenerowany w caƂoƛci przez jcs-autoValidate. Po zatwierdzeniu formularza, pytaniem pozostaje, co uĆŒytkownik zobaczy podczas wysyƂania.

Informacje zwrotne od uĆŒytkownikĂłw za pomocą przyciskĂłw Ladda

Przyciski „Ladda” to struktura zbudowana na JAVASCRIPT która nadaje przyciskom efekt wizualny po ich naciƛnięciu.

Jeƛli przyciskowi zostanie nadany atrybut „ladda” i naciƛnięty, pojawi się efekt wirowania. Dostępne są rĂłĆŒne style danych dla dodatkowych efektĂłw wizualnych.

PoniĆŒszy przykƂad pokazuje prosty formularz z przyciskiem „Wyƛlij”. Po naciƛnięciu przycisku pojawia się na nim efekt wirowania.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠ Poprawka: oryginaƂ zaƂadowany angular-ladda.js oraz angular-ladda.min.js together, co rejestruje ten sam moduƂ dwukrotnie i ponownie pobiera dwie wersje AngularJS. Wymieniono rĂłwnieĆŒ jcs-autoValidate jako zaleĆŒnoƛć, ktĂłrej ten przykƂad nigdy nie uĆŒywa. Tutaj zaƂadowano jedną kopię kaĆŒdej biblioteki.

Code Wyjaƛnienie

  1. "ng-przeƛlijDyrektywa ” wywoƂuje funkcję o nazwie „submit”, która zmienia atrybut ladda przycisku.
  2. Atrybut ladda naleĆŒy do frameworka Ladda i dodaje efekt spinu. Jego wartoƛć jest powiązana z submitting zmienna.
  3. WƂaƛciwoƛć data-style to kolejny atrybut Ladda, który wybiera inny efekt wizualny.
  4. Aby framework dziaƂaƂ, do aplikacji AngularJS naleĆŒy dodać moduƂ 'angular-ladda'.
  5. submitting Zmienna jest inicjowana na false, więc przycisk uruchamia się bez efektu wirowania.
  6. Funkcja Submit ustawia submitting na wartoƛć true, co powoduje zastosowanie efektu. W rzeczywistej aplikacji zostanie on zresetowany do false po otrzymaniu odpowiedzi od serwera, w przeciwnym razie przycisk będzie się obracaƂ w nieskoƄczonoƛć.

Wydajnoƛć

Gdy formularz jest wyƛwietlany po raz pierwszy, przycisk „Wyƛlij” jest widoczny w zwykƂej formie.

Po naciƛnięciu przycisku submitting Zmienna jest ustawiona na wartoƛć true. Ta wartoƛć osiąga atrybut „ladda” przycisku, wywoƂując efekt wirowania.

FAQ

$dirty staje się prawdą, gdy wartoƛć się zmienia. $touched staje się prawdą, gdy pole traci fokus. UĆŒyj $touched, aby opĂłĆșnić bƂąd do momentu, aĆŒ uĆŒytkownik przejdzie dalej, co wydaje się mniej agresywne podczasping.

Dodaj dyrektywę ng-pattern z wyraĆŒeniem regularnym, na przykƂad ng-pattern=”/^[0-9]{6}$/”. BƂąd pojawia się wtedy jako $error.pattern, ktĂłry ngMessages moĆŒe zgƂosić jak kaĆŒde wbudowane ograniczenie.

Tak. Narzędzia AI odczytują znaczniki i generują pasujące bloki ng-pattern i ngMessages. Zawsze sprawdzaj wyraĆŒenia regularne, poniewaĆŒ generowane wzorce adresĂłw e-mail i numerĂłw telefonĂłw często odrzucają prawidƂowe dane wejƛciowe.

Asystenci AI szybko sprawdzają trzy typowe przyczyny: brak atrybutu name w formularzu lub kontrolce, brakujący ng-model oraz przerwanie novalidate, przez co przeglądarka jako pierwsza przechwytuje przesƂanie.

Nie. Poprawia to komfort uĆŒytkowania i zmniejsza liczbę przesyƂanych danych, ale kaĆŒdy moĆŒe to ominąć za pomocą narzędzi programistycznych. KaĆŒda reguƂa wymuszona w przeglądarce musi zostać ponownie wymuszona na serwerze.

Podsumuj ten post następująco: