AngularJS vormi valideerimine esitamisel: $dirty, $valid ja $invalid

⚡ Nutikas kokkuvõte

AngularJS-i vormi valideerimine kontrollib enne serverisse jõudmist, kas vormi sisestatud andmed on õiged ja täielikud. Siin käsitletakse nelja lähenemisviisi, alates tavalistest HTML5 atribuutidest ja ulatusomadustest kuni automaatsete valideerimismooduliteni.

🧩 HTML5 atribuudid: Nõutav atribuut ning e-posti aadressi, parooli ja numbri sisestustüübid pakuvad brauseripõhiseid kontrolle ilma skriptimiseta.
🔍 Riigi omadused: AngularJS paljastab nimega vormis oleva iga nimega juhtelemendi puhul väärtused $dirty, $pristine, $valid ja $invalid.
???? ️ Nimetamisnõue: Nii vorm kui ka iga juhtelement vajavad atribuuti name, kuna valideerimisolekut kirjeldatakse kujul formName.controlName.
🚫 Natiivsete hüpikakende blokeerimine: Vormile novalidate lisamine takistab brauseril esitamise pealtkuulamist, et AngularJS saaks sellega hakkama.
💬 Sõnumi kuvamine: ngMessages moodul asendab virnastatud ng-show direktiivid ja kuvab korraga ühe vea prioriteetsuse järjekorras.
⚙️ Automaatne valideerimine: jcs-autoValidate moodul genereerib iga juhtelemendi jaoks veateateid ilma kohandatud märgistuseta.
🔘 Esitamise tagasiside: Ladda nupp rakendab esitamise ajal pöörlevat sümbolit, mis annab kasutajale märku edenemisest.

Loe rohkem

Vormi kinnitamine AngularJS-is

Vormi kinnitamine AngularJS-is on protsess, mille käigus tagatakse vormi sisestatud andmete õigsus ja terviklikkus. Kui kasutaja vormi esitab, toimub esmalt valideerimine enne andmete serverisse saatmist. Valideerimisprotsess tagab parimal võimalikul määral, et sisestusväljad on õigesti täidetud.

Reaalses näites oletame, et sait nõuab enne täieliku juurdepääsu andmist registreerimisvormi täitmist. Registreerimislehel oleksid sisestusväljad kasutajanime, parooli, e-posti aadressi jne jaoks.

Näiteks peab e-posti aadress alati olema vormingus kasutajanimi@sait.domeenKui keegi sisestab ainult kasutajanime, peaks valideerimine ebaõnnestuma. Valideerimine teeb need põhikontrollid enne, kui andmed serverisse edasiseks töötlemiseks saadetakse.

⚠️ Versiooni märkus: AngularJS (haru 1.x) jõudis 31. detsembril 2021 oma eluea lõppu ja ei saa enam turvapaiku. Allpool toodud meetodid jäävad kehtima ka pärandrakenduste puhul; tänapäevane Angular teeb sama tööd mallipõhiste või reaktiivsete vormide puhul.

Vormi valideerimine HTML5 abil

Vormi valideerimine on protsess, mille käigus veebivormi sisestatud teave kontrollitakse enne selle serverisse saatmist. Kliendi poolel valideerimine on eelistatavam, kuna see lisab palju vähem koormust kui vormi uuesti esitamine pärast edasi-tagasi reisi.

Allolev näide kujutab lihtsat registreerimisvormi, kus kasutaja sisestab kasutajanime, parooli, e-posti aadressi ja vanuse. Vormil on valideerimiskontroll, mis tagab teabe õige sisestamise.

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

⚠️ Parandused on rakendatud kõigile sellel lehel olevatele kuulutustele. Originaalid deklareeriti chrset="UTF 8", mis pole ei kehtiv atribuut ega kehtiv kodeering, ja laadis AngularJS-i kolm korda uuesti — angular-route.js esiteks, mis viskab vea, kuna marsruudimoodul registreerub laadimata raamistiku vastu, seejärel angular.min.js ja angular.js, sama raamatukogu kaks korda. Nad tõmbasid ka bootstrap.css läbi <script> silt, seega stiili ei rakendatud kunagi. Iga kirje laadib nüüd ühe teeki, versioon 1.8.3, ja lingib stiililehe õigesti. Paigutuse täidis on loodud korduvatest   üksused on eemaldatud.

Code Selgitus

Tekstisisestustüübi puhul required Atribuut tähendab, et vormi esitamisel ei saa tekstiväli tühi olla.
Järgmine sisestustüüp on parool. Kuna tüübiks on märgitud parool, on väljale sisestatud tekst maskeeritud.
Kuna sisestustüübiks on määratud e-post, peab kastis olev tekst vastama mustrile nimi@sait.domeen.
Kui sisestustüübiks on märgitud number, siis väli klaviatuurilt sisestatud märke lihtsalt ei aktsepteeri.

Väljund

Valideerimise toimimise nägemiseks klõpsake midagi sisestamata nuppu Esita.

Ilmub hüpikaken, mis teavitab, et väli tuleb täita, seega blokeerib kohustuslikuks märgitud juhtelement esitamise, kui see tühjaks jäetakse.

Väärtuse sisestamisel parooliväljale kuvatakse tärn (*), mis maskeerib tähemärgid.

Valesti vormindatud e-posti aadressi sisestamine ja nupule „Esita” klõpsamine kuvab hüpikakna, kus küsitakse @-sümbolit. Vanusekontrolli väljale sisestatud tähemärgid ei ilmu kunagi, kuna väli aktsepteerib ainult numbreid.

Brauseri hüpikaknaid on kiire seadistada, kuid nende sõnastust ja stiili ei saa muuta. Siin võtavad ohjad üle AngularJS-i valideerimisomadused.

Vormi kinnitamine kasutades $dirty, $valid, $invalid, $pristine

AngularJS pakub valideerimiseks oma omadusi. Järgmised omadused on nähtavad igal nimega juhtelemendil:

$määrdunud – Kasutaja on juhtseadmega suhelnud
$kehtiv – Välja sisu on kehtiv
$kehtetu – Välja sisu on kehtetu
$põline – Kasutaja pole veel juhtseadmega suhelnud

Allpool on toodud sammud AngularJS-i valideerimise teostamiseks.

Step 1) Kasuta novalidate omadust vormi deklareerimisel. See annab brauserile teada, et valideerimisega tegeleb AngularJS.

Step 2) Veenduge, et vormil oleks nimi määratletud, sest seda nime kasutatakse valideerimisolekusse jõudmiseks.

Step 3) Veenduge, et igal juhtnupul on ka name atribuut samal põhjusel. Ilma nimeta juhtelementi vormil kunagi ei registreerita.

Step 4) Kasuta ng-show direktiiv omaduste $dirty, $invalid ja $valid kontrollimiseks.

Allolevas näites on üks tekstiväli, kuhu kasutaja sisestab teema nime. Kui see jäetakse tühjaks, käivitatakse valideerimisviga ja kuvatakse teade.

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

⚠️ Kaks loogikaviga parandatud. Originaal keelas nupu välja ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Sest $dirty on väär kuni kasutaja välja puudutab, nupp jääb aktiivseks lubatud puutumata tühjal vormil, täpselt sellel ümbrisel, mille blokeerimiseks see oli mõeldud; myForm.$invalid hõlmab mõlemat. Algne versioon pakkus ka vaikeväärtuse sisse $scope.Display = function () { $scope.user = 'Angular'; }, funktsioon, mida kunagi ei kutsutud, seega avanes tekstiväli tühjalt, hoolimata tekstist, mis väitis, et see näitab „AngularJS“. Omistus tehakse nüüd otse, kusjuures ümbritsev tekst on tsitaadis.

Code Selgitus

Vormile antakse nimi „minuvorm“. See on vajalik selle valideerimise juhtelementidele juurdepääsuks.
. novalidate omadus peatab brauseri valideerimise, seega saab seda teha AngularJS.
ng-show direktiiv kontrollib omadusi „$dirty” ja „$invalid”. Kui tekstikasti on muudetud, on $dirty tõene; kui selle väärtus on tühi, on $invalid tõene. Kui mõlemad on tõesed, kuvatakse punase tekstiga vahemik.
Pesastatud kontroll loeb atribuuti „$error.required”, mis on tõene alati, kui nõutaval juhtelemendil pole väärtust, ja kuvab teate „Kasutajanimi on nõutav”.
Esitamise nupp on keelatud läbi ng-disabled alati, kui vorm tervikuna on kehtetu.
Kontroller määrab tekstikasti algväärtuseks „AngularJS”, nii et vorm avaneb kehtivas olekus ja valideerimist on teksti kustutamisel lihtsam jälgida.

Väljund

Vormi esmakordsel kuvamisel kuvatakse tekstikastis kiri „AngularJS“ ja saatmisnupp on lubatud. Niipea kui tekst on eemaldatud, kuvatakse veateade ja nupp deaktiveeritakse.

Ülaltoodud ekraanipilt näitab kahte asja:

Esitamise nupp on keelatud
Teema tekstikastis teema nime pole, seega kuvatakse veateade „Kasutajanimi on kohustuslik”.

Kuidas kuvada valideerimisvigu ngMessages'iga

Ülaltoodud muster töötab, aga see ei skaleeru. Nelja piiranguga väli vajab nelja pesastatud piirangut. ng-show ulatub ja kui mitu neist korraga rikki lähevad, kuvatakse kõik sõnumid koos. ngMessages AngularJS meeskonna poolt eraldi tarnitav moodul lahendab mõlemad probleemid: see kuvab korraga ühe sõnumi nende kirjutamise järjekorras.

Laadige moodul ja lisage see sõltuvusena.

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

Seejärel loetakse märgistust reeglite loendina, mitte tingimuste virnana.

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

Kolm detaili tagavad selle hea toimimise praktikas. ng-messages atribuudipunktid kontrollpunkti juures $error objekti, mitte tõeväärtust, seega pole tingimust vaja korrata. Ainult esimene sobivus ng-message renderdab, mis tähendab, et tühi väli annab teada, et see on kohustuslik, selle asemel, et kurta ka selle pikkuse üle. ng-messages-multiple pöörab selle käitumise ümber, kui iga ebaõnnestumist on tõesti vaja loetleda.

Mähiping plokk sees ng-if="myForm.user.$dirty" hoiab vormi vaikseks, kuni kasutaja on midagi sisestanud. Asendades $touched eest $dirty lükkab sõnumit edasi, kuni fookus lahkub väljalt, mis on pika registreerimisvormi puhul tavaliselt sõbralikum valik.

Üks hoiatus: ngMessages tarnitakse eraldi failina, seega skriptisildi või moodulisõltuvuse unustamisel ei renderda plokk midagi ja konsooliviga seda ei seleta.

Sõnumite käsitsi kirjutamine on täpne, kuid korduv. Järgmises osas käsitletakse moodulit, mis genereerib need automaatselt.

Vormi kinnitamine AngularJS-i automaatse kinnitamise abil

AngularJS saab vormi kõiki juhtelemente automaatselt valideerida, ilma et valideerimiseks või veateadete kuvamiseks oleks vaja kohandatud koodi. Seda tehakse kogukonnamooduli nimega „jcs-autoValidate” lisamise abil.

Selle mooduli kasutamisel pole valideerimise käivitamiseks ega teadete kuvamiseks vaja spetsiaalset koodi; kõik toimub jscs-autoValidate'i sees.

Allolev näide sisaldab lihtsat vormi ühe kohustusliku tekstiväljaga. Kui juhtelementi ei täideta, kuvatakse veateade.

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

⚠️ Parandus: originaal identifitseeris juhtelemendi id="user" ainult. jcs-autoValidate jõuab juhtelemendini vormi kaudu, seega a name atribuut on kohustuslik ja teade ei ilmunud kunagi ilma selleta. Algselt laaditi ka kaks erinevat AngularJS-i versiooni, 1.6.4 alates Google CDN koos versiooniga 1.6.9 ja mitte kunagi lingitud Bootstrap isegi kui näide sõltub sellest form-group ja form-control klassid veateksti positsioneerimiseks.

💡 Märkus: jcs-autoValidate on kogukonnaprojekt ja seda enam aktiivselt ei hooldata. See jääb kasutatavaks olemasolevates AngularJS-i rakendustes, kuid sisseehitatud ngMessages Varem näidatud lähenemine on uue asja puhul turvalisem valik.

Code Selgitus

Kaasas on skript „jcs-auto-validate.js”, mis sisaldab kõiki automaatse valideerimise funktsioone.
Iga juhtelement ja seda ümbritsev div paigutatakse klassi „form-group“, kuhu moodul oma sõnumi sisestab.
Juhtelemendil on nii ID kui ka a nameja Bootstrap tarnib form-control stiil.
Moodul „jcs-autoValidate” on loetletud AngularJS mooduli sõltuvusena.

Väljund

Vaikimisi kuvatakse vorm täpselt nii, nagu see on kirjutatud.

Tühja vormi esitamisel kuvatakse teade „See väli on kohustuslik”, mille on täielikult genereerinud jcs-autoValidate. Kui vorm on valideeritud, jääb alles küsimus, mida kasutaja saatmise ajal näeb.

Kasutajate tagasiside Ladda nuppudega

„Ladda” nupud on raamistik, mis on ehitatud peale JavaScript mis annab nuppudele vajutamisel visuaalse efekti.

Kui nupule antakse atribuut „ladda” ja seda vajutatakse, kuvatakse pöörlemisefekt. Täiendavate visuaalsete efektide saamiseks on saadaval erinevad andmestiilid.

Allolev näide kujutab lihtsat vormi, millel on saatmisnupp. Nupu vajutamisel ilmub sellele pöörlemise efekt.

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

⚠️ Parandus: originaal laaditud angular-ladda.js ja angular-ladda.min.js koos, mis registreerib sama mooduli kaks korda, ja tõmbas uuesti sisse kaks AngularJS-i versiooni. Samuti loetles see jcs-autoValidate sõltuvusena, mida see näide kunagi ei kasuta. Siia laaditakse igast teegist üks koopia.

Code Selgitus

"ng-submit” kutsub funktsiooni nimega „submit”, mis muudab nupu ladda atribuuti.
Atribuut ladda kuulub Ladda raamistikku ja see lisab spinniefekti. Selle väärtus on seotud submitting muutuja.
Andmestiili omadus on veel üks Ladda atribuut, mis valib erineva visuaalse efekti.
Raamistiku toimimiseks tuleb AngularJS rakendusele lisada moodul 'angular-ladda'.
. submitting Muutuja initsialiseeritakse väärtusele väär, seega nupp käivitub ilma pöörlemisefektita.
Esitamisfunktsioon seab submitting väärtusele tõene, mis rakendab efekti. Päris rakenduses lähtestatakse see serveri vastuse korral väärtusele väär, vastasel juhul pöörleb nupp igavesti.

Väljund

Vormi esmakordsel kuvamisel kuvatakse saatmisnupp tavalisel kujul.

Kui nuppu vajutatakse, siis submitting muutuja väärtuseks määratakse tõene. See väärtus jõuab nupu atribuudini „ladda“, tekitades pöörlemisefekti.

KKK

$dirty saab tõeseks, kui väärtus muutub. $touched saab tõeseks, kui väli kaotab fookuse. Kasutage $touched vea edasilükkamiseks, kuni kasutaja on edasi liikunud, mis tundub ty puhul vähem agressiivne.ping.

Lisage ng-pattern direktiiv regulaaravaldisega, näiteks ng-pattern=”/^[0-9]{6}$/”. Seejärel kuvatakse tõrge kujul $error.pattern, millest ngMessages saab teatada nagu iga sisseehitatud piirangust.

Jah. Tehisintellekti tööriistad loevad märgistust ja genereerivad vastavad nõutavad ng-mustrid ja ngMessages plokid. Vaadake alati üle regulaaravaldised, kuna genereeritud e-posti ja telefoninumbri mustrid lükkavad sageli tagasi kehtiva sisendi.

Tehisintellekti assistendid kontrollivad kiiresti kolme tavalist põhjust: vormil või juhtelemendil puudub atribuut name, puudub ng-mudel ja puudub novalidate, et brauser peataks esitamise esimesena.

Ei. See parandab kogemust ja vähendab edasi-tagasi reise, aga igaüks saab sellest arendustööriistadega mööda hiilida. Iga brauseris jõustatud reegel tuleb serveris uuesti jõustada.

AngularJS vormi valideerimine esitamisel: $dirty, $valid ja $invalid

Vormi kinnitamine AngularJS-is

Vormi valideerimine HTML5 abil

Code Selgitus

Väljund

Vormi kinnitamine kasutades $dirty, $valid, $invalid, $pristine

Code Selgitus

Väljund

Kuidas kuvada valideerimisvigu ngMessages'iga

Vormi kinnitamine AngularJS-i automaatse kinnitamise abil

Code Selgitus

Väljund

Kasutajate tagasiside Ladda nuppudega

Code Selgitus

Väljund

KKK

Võta see postitus kokku järgmiselt:

Tellige uudiskiri