AngularJS Formularvalidering ved indsendelse: $dirty, $valid & $invalid

Formularvalidering i AngularJS

Formularvalidering I AngularJS er processen med at sikre, om de data, der indtastes i en formular, er korrekte og fuldstændige. Når en bruger indsender formularen, sker der først en validering, før oplysningerne sendes til serveren. Valideringsprocessen sikrer i videst muligt omfang, at inputfelterne er udfyldt korrekt.

I et eksempel fra den virkelige verden, antag et websted, der kræver, at en registreringsformular udfyldes, før der gives fuld adgang. Registreringssiden ville have inputfelter til brugernavn, adgangskode, e-mail-id osv.

For eksempel skal e-mail-id'et altid være i formatet brugernavn@site.domæneHvis nogen kun indtaster brugernavnet, burde valideringen mislykkes. Valideringen udfører disse grundlæggende kontroller, før oplysningerne sendes til serveren til videre behandling.

⚠️ Versionsnotat: AngularJS (1.x-grenen) nåede slutningen af ​​sin levetid den 31. december 2021 og modtager ikke yderligere sikkerhedsrettelser. Teknikkerne nedenfor forbliver korrekte for ældre applikationer; moderne Angular håndterer det samme job med skabelondrevne eller reaktive formularer.

Formularvalidering ved hjælp af HTML5

Formularvalidering er processen med at forhåndsvalidere oplysninger indtastet i en webformular, før den sendes til serveren. Validering på klientsiden er at foretrække, fordi det tilføjer langt mindre overhead end at præsentere formularen igen efter en frem- og tilbagetur.

Eksemplet nedenfor viser en simpel registreringsformular, hvor brugeren indtaster et brugernavn, en adgangskode, en e-mailadresse og en alder. Formularen indeholder valideringskontroller, der sikrer, at oplysningerne indtastes korrekt.

<!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>

⚠️ Rettelser er foretaget på alle annoncer på denne side. Originalerne erklærede chrset="UTF 8", som hverken er en gyldig attribut eller en gyldig kodning, og indlæste AngularJS tre gange — angular-route.js først, hvilket udløser en fejl fordi rutemodulet registrerer sig mod et framework, der ikke er indlæst, derefter angular.min.js og angular.js, det samme bibliotek to gange. De trak også bootstrap.css gennem en <script> tag, så der aldrig blev anvendt styling. Hver liste indlæser nu ét bibliotek, version 1.8.3, og linker stylesheet korrekt. Layoutpolstring bygget op fra gentagne   enheder er blevet fjernet.

Code Forklaring

1. For tekstinputtypen er required Attributten betyder, at tekstfeltet ikke kan være tomt, når formularen indsendes.
2. Den næste inputtype er adgangskode. Da typen er markeret som adgangskode, maskeres tekst indtastet i feltet.
3. Da inputtypen er angivet som e-mail, skal teksten i feltet matche mønsteret navn@site.domæne.
4. Når inputtypen er markeret som et tal, accepteres tegn, der skrives fra tastaturet, simpelthen ikke af feltet.

Produktion

For at se valideringen i aktion skal du klikke på Send uden at indtaste noget.

Der vises en pop op-meddelelse om, at feltet skal udfyldes, så det kontrolelement, der er markeret som påkrævet, blokerer afsendelse, når det efterlades tomt.

Når du indtaster en værdi i adgangskodekontrollen, vises symbolet '*', der maskerer tegnene.

Hvis du indtaster en forkert udformet e-mailadresse og klikker på Send, åbnes en pop op-boks, der beder om @-tegnet. Endelig vises tegn, der er indtastet i aldersfeltet, aldrig, fordi feltet kun accepterer tal.

Browser-pop-ups er hurtige at sætte op, men deres ordlyd og stil kan ikke ændres. Det er her, AngularJS-valideringsegenskaberne tager over.

Formularvalidering ved hjælp af $dirty, $valid, $invalid, $pristine

AngularJS leverer sine egne egenskaber til validering. Følgende egenskaber vises på alle navngivne kontrolelementer:

• $ beskidt – Brugeren har interageret med styringen
• $gyldig – Feltindholdet er gyldigt
• $ugyldig – Feltindholdet er ugyldigt
• $urørt – Brugeren har endnu ikke interageret med styringen

Nedenfor er trinnene til at udføre AngularJS-validering.

Trin 1) Brug novalidate egenskaben ved deklarering af formularen. Dette fortæller browseren, at valideringen vil blive håndteret af AngularJS.

Trin 2) Sørg for, at formularen har et defineret navn, da dette navn bruges til at nå valideringstilstanden.

Trin 3) Sørg for, at hver kontrol også har en name attribut, af samme grund. Et kontrolelement uden et navn registreres aldrig på formularen.

Trin 4) Brug ng-show direktiv til at kontrollere egenskaberne $dirty, $invalid og $valid.

Eksemplet nedenfor har et enkelt tekstfelt, hvor brugeren indtaster et emnenavn. Hvis det ikke er angivet, udløses en valideringsfejl, og meddelelsen vises.

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

⚠️ To logiske fejl rettet. Originalen deaktiverede knappen med ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Fordi $dirty er falsk, indtil brugeren rører ved feltet, knappen forblev aktiveret på en uberørt tom formular, præcis den sag, den skulle blokere; myForm.$invalid dækker begge. Originalen indkapslede også standardværdien i $scope.Display = function () { $scope.user = 'Angular'; }, en funktion der aldrig blev kaldt, så tekstboksen åbnede tom på trods af at teksten påstod at den viste "AngularJS". Tildelingen foretages nu direkte med den værdi, som den omgivende tekst citerer.

Code Forklaring

1. Formularen får navnet "minFormular". Dette er nødvendigt for at kunne nå dens kontrolelementer til validering.
2. novalidate egenskaben forhindrer browseren i at validere, så AngularJS kan gøre det i stedet.
3. Direktivet ng-show kontrollerer egenskaberne "$dirty" og "$invalid". Hvis tekstfeltet er blevet ændret, er $dirty sandt; hvis dens værdi er tom, er $invalid sandt. Når begge er sande, vises span med den røde tekst.
4. Den indbyggede kontrol læser egenskaben "$error.required", som er sand, når et påkrævet kontrolelement ikke har nogen værdi, og viser "Brugernavn er påkrævet".
5. Send-knappen er deaktiveret via ng-disabled når formularen som helhed er ugyldig.
6. Controlleren indstiller den indledende tekstboksværdi til "AngularJS", så formularen åbnes i en gyldig tilstand, og valideringen er lettere at observere, når teksten slettes.

Produktion

Når formularen vises første gang, viser tekstfeltet "AngularJS", og knappen "send" er aktiveret. Så snart teksten er fjernet, vises fejlmeddelelsen, og knappen deaktiveres.

Skærmbilledet ovenfor viser to ting:

• Send-knappen er deaktiveret
• Der er intet emnenavn i emnefeltet, så fejlmeddelelsen "Brugernavn er påkrævet" vises

Sådan viser du valideringsfejl med ngMessages

Mønsteret ovenfor fungerer, men det skalerer ikke. Et felt med fire begrænsninger skal have fire indbyggede ng-show spænder, og når flere af dem fejler på én gang, vises hver besked sammen. ngMessages Modulet, der leveres separat af AngularJS-teamet, løser begge problemer: det viser én besked ad gangen i den rækkefølge, beskederne er skrevet.

Indlæs modulet, og tilføj det som en afhængighed.

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

Markeringen læses derefter som en liste over regler i stedet for en stak af betingelser.

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

Tre detaljer gør, at dette fungerer godt i praksis. ng-messages attributpunkter ved kontrollens $error objekt i stedet for ved en boolsk værdi, så ingen betingelse behøver at gentages. Kun den første matchende ng-message gengives, hvilket betyder, at et tomt felt rapporterer, at det er påkrævet i stedet for også at klage over dets længde. Tilføjelse ng-messages-multiple vender den adfærd om, når alle fejl virkelig skal listes.

Wrapping blokken i ng-if="myForm.user.$dirty" holder formularen tavs, indtil brugeren rent faktisk har skrevet noget. Erstatning $touched forum $dirty forsinker beskeden yderligere, indtil fokus forlader feltet, hvilket normalt er det mere venlige valg på en lang registreringsformular.

En advarsel: ngMessages sendes som en separat fil, så hvis man glemmer script-tagget eller modulafhængigheden, render blokken ingenting, uden nogen konsolfejl til at forklare det.

At skrive beskeder i hånden er præcist, men gentagende. Det næste afsnit dækker et modul, der genererer dem automatisk.

Formularvalidering ved hjælp af AngularJS Auto Validate

AngularJS kan validere alle kontrolelementer på en formular automatisk, uden brugerdefineret kode til validering eller fejlmeddelelser. Dette gøres ved at inkludere et community-modul kaldet "jcs-autoValidate".

Med dette modul på plads er der ikke behov for særlig kode til at køre valideringen eller vise meddelelserne; alt håndteres inde i jcs-autoValidate.

Eksemplet nedenfor har en simpel formular med et enkelt obligatorisk tekstfelt. Der vises en fejlmeddelelse, hvis kontrolelementet ikke er udfyldt.

<!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>

⚠️ Rettelse: originalen identificerede kontrollen med id="user" kun. jcs-autoValidate når kontrolelementet gennem formularen, så en name Attributten er obligatorisk, og meddelelsen blev aldrig vist uden den. Originalen indlæste også to forskellige AngularJS-versioner, 1.6.4 fra Google CDN sammen med 1.6.9, og aldrig linket Bootstrap selvom eksemplet afhænger af dets form-group og form-control klasser til at placere fejlteksten.

💡 Bemærk: jcs-autoValidate er et fællesskabsprojekt og vedligeholdes ikke længere aktivt. Det kan stadig bruges på eksisterende AngularJS-applikationer, men den indbyggede ngMessages Den tidligere viste metode er det sikrere valg til alt nyt.

Code Forklaring

1. Scriptet “jcs-auto-validate.js”, som indeholder al automatisk valideringsfunktionalitet, er inkluderet.
2. Hver kontrol og dens omgivende div er placeret i en "form-group"-klasse, som er der, hvor modulet injicerer sin besked.
3. Kontrollen har både et id og et nameog Bootstrap forsyner form-control styling.
4. Modulet "jcs-autoValidate" er angivet som en afhængighed af AngularJS-modulet.

Produktion

Som standard gengives formularen præcis som skrevet.

Når den tomme formular sendes, vises meddelelsen "Dette felt er obligatorisk", som genereres udelukkende af jcs-autoValidate. Når formularen er valideret, er det resterende spørgsmål, hvad brugeren ser, mens den sendes.

Brugerfeedback med Ladda knapper

"Ladda"-knapperne er et rammeværk bygget oven på JavaScript der giver knapperne en visuel effekt, når de trykkes ned.

Hvis en knap får attributten "ladda" og trykkes ned, vises en spin-effekt. Forskellige datastile er tilgængelige for yderligere visuelle effekter.

Eksemplet nedenfor viser en simpel formular med en send-knap. Når knappen trykkes ned, vises en spin-effekt på den.

<!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>

⚠️ Rettelse: den originale indlæste angular-ladda.js og angular-ladda.min.js sammen, hvilket registrerer det samme modul to gange, og igen trak to AngularJS-versioner ind. Det listede også jcs-autoValidate som en afhængighed, som dette eksempel aldrig bruger. Én kopi af hvert bibliotek indlæses her.

Code Forklaring

1. Den "ng-indsende"-direktivet kalder en funktion med navnet "submit", som ændrer knappens ladda-attribut.
2. Ladda-attributten tilhører Ladda-frameworket og er det, der tilføjer spin-effekten. Dens værdi er bundet til submitting variabel.
3. Data-style-egenskaben er en anden Ladda-attribut, der vælger en anden visuel effekt.
4. Modulet 'angular-ladda' skal tilføjes til AngularJS-applikationen for at frameworket kan fungere.
5. submitting Variablen initialiseres til falsk, så knappen starter uden spin-effekten.
6. Submit-funktionssættene submitting til sand, hvilket anvender effekten. I en rigtig applikation ville den blive nulstillet til falsk, når serveren svarer, ellers drejer knappen for evigt.

Produktion

Når formularen vises første gang, vises send-knappen i sin almindelige form.

Når knappen trykkes ned, submitting Variablen sættes til sand. Denne værdi når knappens "ladda"-attribut, hvilket producerer spin-effekten.

Ofte Stillede Spørgsmål