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.

POWIĄZANE ARTYKUŁY

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: