Az AngularJS űrlap érvényesítése beküldéskor: regisztrációs példa
James Hartman
Űrlapérvényesítés az AngularJS-ben
Az űrlap érvényesítése Az AngularJS-ben az a folyamat, amely biztosítja, hogy az űrlapon megadott adatok helyesek és teljesek-e. Amikor egy felhasználó elküldi az űrlapot, először az érvényesítés megtörténik, mielőtt a részleteket elküldi a szervernek. Az érvényesítési folyamat a lehető legjobban biztosítja, hogy a beviteli mezők adatai a megfelelő módon legyenek megadva.
Egy valós példában tételezzünk fel egy webhelyet, amelyhez regisztrációs űrlapot kell kitölteni, mielőtt teljes hozzáférést kapna ehhez a webhelyhez. A regisztrációs oldalon beviteli mezők találhatók a felhasználónév, jelszó, e-mail azonosító és így tovább.
Például az e-mail azonosítónak mindig a következő formátumban kell lennie felhasználónév@webhely.domain; ha valaki csak a felhasználónevet írja be az email azonosítóba, akkor ideális esetben az érvényesítés sikertelen lesz. Tehát az érvényesítés során ezeket az alapvető ellenőrzéseket kell elvégezni, mielőtt a részleteket elküldik a szervernek további feldolgozás céljából.
Űrlapérvényesítés HTML5 használatával
Az űrlapellenőrzés a felhasználó által a webes űrlapon megadott információk előzetes ellenőrzésének folyamata, mielőtt azok elküldenék a szervernek. Mindig jobb magán az ügyféloldalon érvényesíteni az információkat. Ennek az az oka, hogy kevesebb többletköltséget jelent, ha a felhasználónak újra be kell mutatnia az űrlapot, ha a megadott adatok hibásak.
Nézzük meg, hogyan hajtható végre az AngularJS űrlapellenőrzés HTML5-ben.
Példánkban egy egyszerű regisztrációs űrlapot mutatunk be a felhasználónak, amelyen a felhasználónak olyan adatokat kell megadnia, mint a felhasználónév, jelszó, e-mail azonosító és életkor.
Az űrlap érvényesítési vezérlőkkel rendelkezik, amelyek biztosítják, hogy a felhasználó megfelelő módon adja meg az információkat.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Code Magyarázat
- A szövegbeviteli típushoz a „required” attribútumot használjuk. Ez azt jelenti, hogy a szövegdoboz nem lehet üres az űrlap elküldésekor, és valamilyen szövegnek jelen kell lennie a szövegdobozban.
- A következő beviteli típus a jelszó. Mivel a beviteli típus jelszóként van megjelölve, ha a felhasználó bármilyen szöveget beír a mezőbe, az maszkolásra kerül.
- 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.
- Ha a beviteli típus számként van megjelölve, és a felhasználó megpróbál bármilyen karaktert beírni a billentyűzet vagy az ábécé segítségével, az nem kerül be a szövegmezőbe.
Ha a kód végrehajtása sikeresen megtörtént, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben az AngularJS űrlap érvényesítéséhez a beküldéskor.
teljesítmény
Az űrlap érvényesítésének működés közbeni megtekintéséhez kattintson a Küldés gombra anélkül, hogy bármilyen információt megadna a képernyőn.
A küldés gombra kattintás után egy felugró ablak jelenik meg, amely egy érvényesítési hibával jelzi, hogy a mezőt ki kell tölteni.
Tehát a szükségesként megjelölt vezérlő érvényesítése hibaüzenetet eredményez, ha a felhasználó nem ír be értéket a szövegmezőbe.
Amikor a felhasználó bármilyen értéket beír a jelszóvezérlőbe, észre fogja venni a „*” szimbólumot, amely a beírt karakterek elfedésére szolgál.
Adjunk meg rossz e-mail azonosítót, és kattintsunk a küldés gombra. A küldés gombra kattintás után egy felugró ablak jelenik meg, amely egy érvényesítési hibát mutat, amely szerint a mezőben a @ szimbólumnak kell szerepelnie.
Tehát az e-mail vezérlőként megjelölt vezérlő érvényesítése hibaüzenetet fog eredményezni, ha a felhasználó nem ír be megfelelő e-mail azonosítót a szövegmezőbe.
Végül, amikor megpróbál bármilyen karaktert beírni az életkor szöveges vezérlőjébe, az nem jelenik meg a képernyőn. A vezérlő csak akkor tölt fel értéket, ha számot ad meg a vezérlőben.
Űrlapellenőrzés a $piszkos, $érvényes, $invalid, $pristine használatával
AngularJS további tulajdonságait biztosítja az érvényesítéshez. Az AngularJS a következő tulajdonságokat biztosítja a vezérlők számára érvényesítési célból
- $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 felsoroljuk azokat a lépéseket, amelyeket követni kell a szögellenőrzés végrehajtásához.
Step 1) Használja a no validate tulajdonságot az űrlap deklarálásakor. Ez a tulajdonság közli a HTML5-tel, hogy az érvényesítést az AngularJS végzi el.
Step 2) Győződjön meg arról, hogy az űrlapnak van-e meghatározott neve. Ennek az az oka, hogy a szögellenőrzés végrehajtásakor az űrlap neve kerül felhasználásra.
Step 3) Győződjön meg arról, hogy minden vezérlőelemnek meg van adva egy neve. Ennek az az oka, hogy a szögellenőrzés végrehajtásakor a vezérlőnév kerül felhasználásra.
Step 4) Használja a ng-show direktívát, hogy ellenőrizze a vezérlők $dirty, $invalid és $valid tulajdonságait.
Nézzünk egy példát, amely magában foglalja a fent említett lépéseket.
A mi példánkban
Csak egy egyszerű szövegmezőnk lesz, amelyben a felhasználónak be kell írnia a téma nevét a szövegmezőbe. Ha ez nem történik meg, érvényesítési hiba lép fel, és a hibaüzenet megjelenik a felhasználó számára.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<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.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Code Magyarázat
- Megjegyzés: adtunk egy nevet az Űrlapnak, ami „myForm”. Ez szükséges az AngularJS-ellenőrzési űrlap vezérlőinek eléréséhez.
- A „novalidate” tulajdonság használata annak biztosítására, hogy a HTML űrlap lehetővé tegye az AngularJS számára az ellenőrzés végrehajtását.
- Az ng-show direktívát használjuk a „$dirty” és „$invalid” tulajdonságok ellenőrzésére. Ez azt jelenti, hogy ha a szövegdobozt módosították, akkor a „$dirty” tulajdonság értéke igaz lesz. Abban az esetben is, ha a szövegdoboz értéke null, az „$invalid” tulajdonság igaz lesz. Tehát ha mindkét tulajdonság igaz, akkor a vezérlő ellenőrzése sikertelen lesz. Így ha mindkét érték igaz, az ng-show is igaz lesz, és megjelenik a span vezérlő a piros színű karakterekkel.
- Ebben a „$error” tulajdonságot ellenőrizzük, amely szintén igaz, mert a vezérlőnél említettük, hogy a vezérlőhöz értéket kell megadni. Ebben az esetben, ha nincs adat a szövegmezőben, a span vezérlő a „Felhasználónév szükséges” szöveget jeleníti meg.
- Ha a szövegdoboz vezérlőértéke érvénytelen, akkor a küldés gombot is szeretnénk letiltani, hogy a felhasználó ne tudja elküldeni az űrlapot. Az „ng-disabled” tulajdonságot használjuk a vezérlőhöz, hogy ezt a vezérlő „$dirty” és „$invalid” tulajdonságának feltételes értéke alapján végezzük.
- A vezérlőben csak a szövegdoboz értékének kezdeti értékét állítjuk be az „AngularJS” szövegre. Ez csak azért történik, hogy az űrlap első megjelenítésekor valamilyen alapértelmezett értéket állítson be a szövegdobozhoz. Jobban megmutatja, hogyan történik a szövegmező érvényesítése.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
teljesítmény
Amikor az űrlap először megjelenik, a szövegdobozban megjelenik az „AngularJS” érték, és a „küldés gomb” engedélyezve van. Amint eltávolítja a szöveget a vezérlőből, az érvényesítési hibaüzenet engedélyezve lesz, és a Küldés gomb le van tiltva.
A fenti képernyőképen két dolog látható
- A Küldés gomb le van tiltva
- A Téma szövegmezőben nincs témanév. Ezért a „Felhasználónév szükséges” hibaüzenetet indítja el.
Űrlapérvényesítés az AngularJS automatikus érvényesítéssel
Az AngularJS-ben van egy lehetőség, amely lehetővé teszi az űrlap összes vezérlőjének automatikus érvényesítését anélkül, hogy egyéni kódot kellene írnia az érvényesítéshez. Ezt megteheti egy „jcs-AutoValidate” nevű egyéni modullal.
Ezzel a modullal nem kell külön kódot elhelyeznie az érvényesítés végrehajtásához vagy a hibaüzenetek megjelenítéséhez. Mindezt a JCS-AutoValidate kódja kezeli.
Nézzünk egy egyszerű példát arra, hogyan lehet ezt elérni.
Ebben a példában
Csak egy egyszerű űrlapunk lesz egy szövegdoboz-vezérlővel, amely kötelező mező. Ha ez a vezérlő nincs kitöltve, hibaüzenetet kell megjeleníteni.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Code Magyarázat
- Először is tartalmaznunk kell a „jcs-auto-validate.js” szkriptet, amely rendelkezik az összes automatikus ellenőrzési funkcióval.
- Biztosítanunk kell, hogy minden elem, beleértve a „div címkét”, egy „form-group” osztályba kerüljön.
- Gondoskodni kell arról is, hogy minden elem (amely HTML elem, például bemeneti vezérlés, span vezérlés, div vezérlés és így tovább), mint például a bemeneti vezérlők, szintén a form-group osztályba kerüljön.
- Szerelje be a jcs-autovalidate-et az AngularJS JS moduljába.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
teljesítmény
Alapértelmezés szerint a kód futtatásakor a fenti űrlap a HTML-kód szerint jelenik meg.
Ha megpróbálja elküldeni az űrlapot, egy hibaüzenet jelenik meg a következővel: „Ez a mező kötelező”. Mindez a JCS-AutoValidate opcióval történik.
Felhasználói visszajelzések a Ladda gombokkal
A „ladda” gombok egy speciális keret a tetejükön lévő gombokhoz JavaForgatókönyv hogy vizuális hatást adjon a gomboknak, amikor megnyomják őket.
Tehát ha egy gomb megkapja a „ladda” attribútumot, és megnyomja, egy pörgési hatás jelenik meg. Ezenkívül a gombhoz különböző adatstílusok állnak rendelkezésre, amelyek további vizuális effektusokat biztosítanak.
Nézzünk egy példát arra, hogyan lehet látni a „ladda” gombokat működés közben. Csak egy egyszerű űrlapot fogunk látni, amelyen van egy elküldés gomb. A gomb megnyomásakor egy centrifugálási effektus jelenik meg a gombon.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Code Magyarázat
- Mi a "ng-submit” utasítás a „submit” nevű függvény meghívására. Ez a függvény a küldés gomb ladda attribútumának megváltoztatására szolgál.
- A ladda attribútum a ladda keretrendszer speciális attribútuma. Ez az attribútum az, amely hozzáadja a pörgés effektust a szabályozáshoz. A ladda attribútum értékét beállítjuk a beküldő változóhoz.
- Az adatstílus tulajdonság ismét a ladda keretrendszer által kínált további attribútum, amely csak egy másik vizuális effektust ad a küldés gombhoz.
- Az 'AngularJS-ladda' modult hozzá kell adni az AngularJS.JS alkalmazáshoz, hogy a ladda keretrendszer működjön.
- Kezdetben egy 'submitting' nevű változó értékét definiáljuk és hamisra állítjuk. Ez az érték a küldés gomb ladda attribútuma számára van beállítva. Ha ezt kezdetben false értékre állítjuk, akkor azt mondjuk, hogy még nem akarjuk, hogy a küldés gomb ladda hatású legyen.
- Deklarálunk egy függvényt, amely a küldés gomb megnyomásakor hívódik meg. Ebben a függvényben a „beküldést” igazra állítjuk. Ez a ladda effektust fogja alkalmazni a küldés gombra.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
teljesítmény
Amikor az űrlap először megjelenik, a küldés gomb egyszerű formájában jelenik meg.
Az elküldés gomb megnyomásakor a vezérlőben a beküldő változó igazra van állítva. Ez az érték átkerül a küldés gomb „ladda” attribútumába, ami a gomb pörgetési hatását okozza.
Összegzésként
- A szövegdoboz HTML-vezérlőinek érvényesítése a „required” attribútum használatával végezhető el.
- A HTML5-ben új vezérlők kerültek hozzáadásra, például jelszó, e-mail cím és szám, amelyek saját ellenőrzési készletet biztosítanak.
- Az AngularJS-ben az űrlapellenőrzés az űrlapvezérlők $dirty, $valid, $invalid és $pristine értékeinek megtekintésével történik.
- Az AngularJS alkalmazások automatikus érvényesítése a JCS-automate validate modul használatával is megvalósítható.
- A Ladda gombok hozzáadhatók egy Angular.js alkalmazáshoz, hogy a gomb megnyomásakor egy kicsit jobb vizuális érzetet adjon a felhasználónak.
