AngularJS űrlapérvényesítés beküldéskor: $dirty, $valid és $invalid

Űrlapérvényesítés az AngularJS-ben

Az űrlap érvényesítése Az AngularJS-ben az űrlapba beírt adatok helyességének és teljességének ellenőrzésére szolgáló folyamat. Amikor a felhasználó elküldi az űrlapot, először az ellenőrzés történik, mielőtt az adatok a szerverre kerülnének. Az ellenőrzési folyamat a lehető legnagyobb mértékben biztosítja, hogy a beviteli mezők a megfelelő módon legyenek kitöltve.

Egy valós példában vegyünk egy olyan webhelyet, amely regisztrációs űrlap kitöltését igényli a teljes hozzáférés megadása előtt. A regisztrációs oldalon beviteli mezők lennének a felhasználónév, jelszó, e-mail cím és így tovább megadásához.

Például az e-mail címnek mindig a következő formátumban kell lennie: felhasználónév@webhely.domainHa valaki csak a felhasználónevet adja meg, az ellenőrzésnek sikertelennek kell lennie. Az ellenőrzés elvégzi ezeket az alapvető ellenőrzéseket, mielőtt az adatok a szerverre kerülnének további feldolgozásra.

⚠️ Verzió megjegyzés: Az AngularJS (az 1.x ág) 2021. december 31-én elérte az élettartama végét, és nem kap további biztonsági javításokat. Az alábbi technikák továbbra is helyesek a régi alkalmazásokhoz; a modern Angular ugyanezt a feladatot kezeli sablonvezérelt vagy reaktív űrlapokkal.

Űrlapérvényesítés HTML5 használatával

Az űrlapérvényesítés az a folyamat, amelynek során a webes űrlapon megadott információkat előzetesen ellenőrzik, mielőtt azok a szerverre kerülnének. Az ügyféloldali ellenőrzés előnyösebb, mivel sokkal kevesebb terhelést jelent, mint az űrlap újbóli megjelenítése egy oda-vissza út után.

Az alábbi példa egy egyszerű regisztrációs űrlapot mutat be, amelyben a felhasználó megadja felhasználónevét, jelszavát, e-mail címét és életkorát. Az űrlap érvényesítési vezérlőket tartalmaz, amelyek biztosítják az információk megfelelő megadását.

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

⚠️ A javítások az ezen az oldalon található összes hirdetésre vonatkoznak. Az eredetiek bejelentették chrset="UTF 8", ami sem nem érvényes attribútum, sem nem érvényes kódolás, és háromszor betöltötte az AngularJS-t — angular-route.js először, ami azért dob, mert a route modul egy be nem töltött keretrendszerhez regisztrál, majd angular.min.js és a angular.js, ugyanaz a könyvtár kétszer. Azt is kihúzták bootstrap.css keresztül <script> tag, így soha nem alkalmaztunk stílust. Minden lista most egy könyvtárat, az 1.8.3-as verziót tölt be, és helyesen csatolja a stíluslapot. Az elrendezés kitöltés ismétlődő elemekből épül fel.   entitások eltávolításra kerültek.

Code Magyarázat

1. A szövegbeviteli típus esetében a required Az attribútum azt jelenti, hogy a szövegmező nem lehet üres az űrlap elküldésekor.
2. A következő beviteli típus a jelszó. Mivel a típus jelszóként van megjelölve, a mezőbe beírt szöveg maszkolva van.
3. Mivel a beviteli típus e-mailként van megadva, a mezőben lévő szövegnek meg kell egyeznie a mintával. név@webhely.domain.
4. Ha a beviteli típus számként van megjelölve, a billentyűzetről beírt karaktereket a mező egyszerűen nem fogadja el.

teljesítmény

A validáció működésének megtekintéséhez kattintson a Küldés gombra anélkül, hogy bármit is beírna.

Megjelenik egy felugró ablak, amely jelzi, hogy a mezőt ki kell tölteni, így a kötelezőként megjelölt vezérlőelem blokkolja a beküldést, ha üresen hagyja.

Egy érték megadásakor a jelszóvezérlőben a '*' szimbólum elfedi a karaktereket.

Ha helytelenül formázott e-mail címet ad meg, majd a Küldés gombra kattint, egy felugró ablak jelenik meg, amely a @ szimbólumot kéri. Végül, a korhatár-beírt karakterek soha nem jelennek meg, mivel a mező csak számokat fogad el.

A böngészőben felugró ablakok gyorsan beállíthatók, de a szövegezésük és stílusuk nem módosítható. Itt veszik át az AngularJS validációs tulajdonságai az irányítást.

Űrlapellenőrzés a $piszkos, $érvényes, $invalid, $pristine használatával

AngularJS saját tulajdonságait biztosítja az érvényesítéshez. A következő tulajdonságok minden elnevezett vezérlőelemen elérhetők:

• $piszkos – A felhasználó kapcsolatba lépett a vezérlővel
• $érvényes – A mező tartalma érvényes
• $érvénytelen – A mező tartalma érvénytelen
• $érintetlen – A felhasználó még nem lépett kapcsolatba a vezérlővel

Az alábbiakban az AngularJS validáció végrehajtásának lépései láthatók.

Step 1) Használja a novalidate tulajdonságot az űrlap deklarálásakor. Ez jelzi a böngészőnek, hogy az AngularJS fogja kezelni az érvényesítést.

Step 2) Győződjön meg róla, hogy az űrlapnak van neve definiálva, mert ezt a nevet használja a rendszer az érvényesítési állapot eléréséhez.

Step 3) Győződjön meg arról, hogy minden vezérlőhöz tartozik egy name attribútum, ugyanezen okból. A név nélküli vezérlőelem soha nem kerül regisztrálásra az űrlapon.

Step 4) Használja a ng-show direktíva a $dirty, $invalid és $valid tulajdonságok ellenőrzésére.

Az alábbi példában egyetlen szövegmező látható, amelybe a felhasználó beírhatja a téma nevét. Ha üresen hagyja, érvényesítési hiba történik, és megjelenik az üzenet.

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

⚠️ Két logikai hiba kijavítva. Az eredeti letiltotta a gombot ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Mert $dirty hamis, amíg a felhasználó meg nem érinti a mezőt, a gomb aktív marad engedélyezve egy érintetlen, üres űrlapon, pontosan abban a tokban, amit el kellett volna zárnia; myForm.$invalid mindkettőt lefedi. Az eredeti az alapértelmezett értéket is belefoglalta $scope.Display = function () { $scope.user = 'Angular'; }, egy soha senki által meg nem hívott függvény, így a szövegdoboz üresen nyílt meg, annak ellenére, hogy a szöveg azt állította, hogy „AngularJS”-t mutat. Az értékadás most közvetlenül történik, a környező szöveg idézőjelei között szereplő értékkel.

Code Magyarázat

1. Az űrlap a „myForm” nevet kapja. Erre szükség van ahhoz, hogy az űrlap vezérlői érvényesítés céljából elérhetők legyenek.
2. Az novalidate tulajdonság leállítja a böngésző validálását, így az AngularJS elvégezheti azt helyette.
3. Az ng-show direktíva ellenőrzi a „$dirty” és az „$invalid” tulajdonságokat. Ha a szövegmező módosult, a $dirty igaz; ha az értéke üres, a $invalid igaz. Ha mindkettő igaz, a piros szöveggel jelölt span jelenik meg.
4. A beágyazott ellenőrzés beolvassa a „$error.required” tulajdonságot, amely akkor igaz, ha egy kötelező vezérlőelemnek nincs értéke, és a „Felhasználónév megadása kötelező” szöveget jeleníti meg.
5. A beküldés gomb le van tiltva a következőn keresztül: ng-disabled amikor a nyomtatvány egésze érvénytelen.
6. A vezérlő a szövegdoboz kezdeti értékét „AngularJS”-re állítja, így az űrlap érvényes állapotban nyílik meg, és az érvényesítés könnyebben megfigyelhető a szöveg törlésekor.

teljesítmény

Amikor az űrlap először megjelenik, a szövegmezőben az „AngularJS” felirat látható, és a küldés gomb engedélyezve van. Amint a szöveg eltávolításra kerül, megjelenik a hibaüzenet, és a gomb letiltásra kerül.

A fenti képernyőkép két dolgot mutat:

• A beküldés gomb le van tiltva
• Nincs téma neve a Téma szövegmezőben, ezért a „Felhasználónév megadása kötelező” hibaüzenet jelenik meg.

Hogyan jelenítsük meg az érvényesítési hibákat az ngMessages segítségével?

A fenti minta működik, de nem skálázható. Egy négy megszorítással rendelkező mezőhöz négy beágyazott megszorítás szükséges. ng-show átfedéseket tartalmaz, és amikor több is egyszerre meghibásodik, minden üzenet együtt jelenik meg. ngMessages modul, amelyet az AngularJS csapata külön szállít, mindkét problémát megoldja: egyszerre egy üzenetet jelenít meg, az üzenetek írásának sorrendjében.

Töltsd be a modult, és add hozzá függőségként.

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

A jelölés ezután szabályok listájaként, nem pedig feltételek halmaként olvasható.

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

Három részlet teszi ezt a gyakorlatban jól működővé. ng-messages attribútumpontok a vezérlőnél $error objektum helyett logikai értékként, így nem kell megismételni a feltételt. Csak az első egyező ng-message renderelést végez, ami azt jelenti, hogy egy üres mező jelzi, hogy kötelező, ahelyett, hogy a hosszára is panaszkodna. ng-messages-multiple megfordítja ezt a viselkedést, amikor minden kudarcot valóban fel kell sorolni.

Tekerjükping a blokk ng-if="myForm.user.$dirty" csendben tartja az űrlapot, amíg a felhasználó ténylegesen be nem gépel valamit. $touched mert $dirty tovább késlelteti az üzenetet, amíg a fókusz el nem hagyja a mezőt, ami általában a barátságosabb választás egy hosszú regisztrációs űrlapon.

Egy figyelmeztetés: ngMessages külön fájlként kerül szállításra, így ha elfelejti a szkriptcímkét vagy a modulfüggőséget, a blokk semmit sem jelenít meg, és nincs konzolhiba, ami ezt magyarázná.

Az üzenetek kézzel történő írása precíz, de ismétlődő feladat. A következő szakasz egy olyan modult mutat be, amely automatikusan generálja azokat.

Űrlapérvényesítés az AngularJS automatikus érvényesítéssel

Az AngularJS képes automatikusan validálni az űrlap összes vezérlőjét, anélkül, hogy egyéni kódot kellene használni az validációhoz vagy a hibaüzenetekhez. Ezt egy „jcs-autoValidate” nevű közösségi modul beépítésével lehet elérni.

Ha ez a modul a helyén van, nincs szükség speciális kódra az ellenőrzés futtatásához vagy az üzenetek megjelenítéséhez; mindent a jcs-autoValidate kezel.

Az alábbi példa egy egyszerű űrlapot mutat be egyetlen kötelező szövegmezővel. Hibaüzenet jelenik meg, ha a vezérlőelem nincs kitöltve.

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

⚠️ Javítás: az eredeti a vezérlőt a következővel azonosította: id="user" csak. A jcs-autoValidate az űrlapon keresztül éri el a vezérlőt, így egy name attribútum kötelező, és az üzenet soha nem jelent meg nélküle. Az eredeti két különböző AngularJS verziót is betöltött, az 1.6.4-et a Google CDN az 1.6.9 mellett, és soha nem volt összekapcsolva Bootstrap még akkor is, ha a példa attól függ, form-group és a form-control osztályok a hiba szövegének pozicionálásához.

💡 Megjegyzés: A jcs-autoValidate egy közösségi projekt, és már nem aktívan karbantartott. Továbbra is használható meglévő AngularJS alkalmazásokon, de a beépített ngMessages A korábban bemutatott megközelítés a biztonságosabb választás bármi új esetében.

Code Magyarázat

1. A „jcs-auto-validate.js” szkript, amely az összes automatikus érvényesítési funkciót tartalmazza, benne van a csomagban.
2. Minden vezérlőelem és a körülötte lévő div egy „form-group” osztályon belül helyezkedik el, ide injektálja a modul az üzenetét.
3. A vezérlő egy azonosítót és egy nameés Bootstrap szállítja a form-control stílus.
4. A „jcs-autoValidate” modul az AngularJS modul függőségeként van felsorolva.

teljesítmény

Alapértelmezés szerint az űrlap pontosan úgy jelenik meg, ahogyan meg van írva.

Az üres űrlap elküldésekor a jcs-autoValidate által generált „Ez a mező kitöltése kötelező” üzenet jelenik meg. Az űrlap érvényesítése után a felhasználó már csak azt a kérdést látja, amit a küldés során lát.

Felhasználói visszajelzések a Ladda gombokkal

A „Ladda” gombok egy keretrendszer, amely a következőkre épül: JavaForgatókönyv amely vizuális hatást kelt a gombok megnyomásakor.

Ha egy gombhoz a „ladda” attribútumot rendeljük és megnyomjuk, egy forgatási effektus jelenik meg. Különböző adatstílusok érhetők el további vizuális effektusokhoz.

Az alábbi példa egy egyszerű űrlapot mutat be egy küldés gombbal. A gomb megnyomásakor egy pörgetési effektus jelenik meg rajta.

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

⚠️ Javítás: az eredeti betöltött angular-ladda.js és a angular-ladda.min.js együtt, ami ugyanazt a modult kétszer regisztrálja, és ismét két AngularJS verziót hívott le. Felsorolta a jcs-autoValidate olyan függőségként, amelyet ez a példa soha nem használ. Minden könyvtárból egy példány kerül ide betöltésre.

Code Magyarázat

1. Azng-submitA ” direktíva meghív egy „submit” nevű függvényt, amely megváltoztatja a gomb ladda attribútumát.
2. A ladda attribútum a Ladda keretrendszerhez tartozik, és ez adja hozzá a spin-effektust. Értéke a következőhöz kötött: submitting változót.
3. A data-style tulajdonság egy másik Ladda attribútum, amely egy másik vizuális effektust választ ki.
4. Az „angular-ladda” modult hozzá kell adni az AngularJS alkalmazáshoz ahhoz, hogy a keretrendszer működjön.
5. Az submitting A változó inicializálása hamis értékre történik, így a gomb a pörgetési effektus nélkül indul.
6. A beküldési függvénykészletek submitting értékre állítja, ami alkalmazza a hatást. Egy valódi alkalmazásban a szerver válasza után hamis értékre állna vissza, különben a gomb örökké forog.

teljesítmény

Amikor az űrlap először megjelenik, a beküldés gomb egyszerű formában jelenik meg.

Amikor megnyomják a gombot, a submitting változó értéke igaz. Ez az érték eléri a gomb „ladda” attribútumát, létrehozva a pörgetési effektust.

GYIK