Hogyan lehet végrehajtani az űrlap-hitelesítést a szögletes JS-ben?

Az érvényesítés az hitelesíteni a felhasználó. Minden olyan webes technológiában használják, mint például és . De ma az Angol JS-ben történő hitelesítésre összpontosítunk a következő sorrendben:

• Mi az űrlapellenőrzés?
• Formahitelesítés szögletes JS-ben
• Az űrlap érvényesítésének lépései
• Kód

Mi az űrlap érvényesítése?

Az űrlap érvényesítése egy olyan technika, amellyel érvényesíteni tudjuk a HTML űrlapot. Vegyünk egy egyszerű példát arra a feltételezésre, hogy a felhasználónak van HTML-űrlapja, és hogy a HTML-űrlapnak különböző mezői vannak, ezeket a mezőket az űrlap-ellenőrző ellenőrzi, amikor azt az űrlapot akarjuk érvényesíteni, amelyre csak az adott mező értékét kell ellenőriznünk a validátor kifejezéssel .

Ha a reguláris kifejezés és a mező értéke megegyeznek, akkor azt mondhatjuk, hogy formánk érvényes. A HTML-űrlapban különböző típusú ellenőrzések léteznek, például e-mail, kötelező, min, max, jelszó stb.

Formahitelesítés szögletes JS-ben

Beszéljünk arról, hogyan érvényesíthetünk egy formát szögletes JS-ben. Az Angular JS különféle típusú űrlapellenőrzési tulajdonságokat biztosít, amelyekkel ellenőrizhetjük az űrlapot, vagy megszerezhetjük az űrlapból az adatokat.

• $ érvényes : Ez a tulajdonság a megfelelő szabály alkalmazásával megmondja, hogy a mező érvényes-e vagy sem.

• $ érvénytelen : Mivel a név érvénytelennek mondja ezt az időjárást, a mező érvénytelen, vagy nem erre vonatkozó szabályon alapszik.

• $ érintetlen : Igaz lesz, ha az űrlapot nem használják.

  
  
  

• $ piszkos : Igaz lesz az űrlap beviteli mező használatakor.

• $ megérintette : BooleanTrue, ha a bemenet elmosódott.

Az űrlap elérése: .

Bemenet elérése: ..

Most magyarázzuk el egy példával az űrlap érvényesítését szögletes JS-ben, így először két fájlt készítünk, az egyik app.js, a másik pedig az index.html. Az index.htm fájlunk egy egyszerű HTML-űrlapot tartalmaz, amelynek szögellenőrzése van, az app.js fájlunk pedig a háttérkódot tartalmazza, amely az index.html oldalon az űrlapellenőrzést kezeli.

Azindex.htmlaz oldal tartalma anovalidatetulajdon és mit jelent ez pontosan?

Az űrlapcímkében szereplő novalidate tulajdonság megmondja a HTML-nek, hogy használhatjuk az egyéni űrlapellenőrzésünket. Ha nem adjuk meg a novalidate tulajdonságot, akkor a HTML űrlap a HTML5 alapértelmezett űrlap érvényesítési tulajdonságainak használatával érvényesül.

Az űrlap érvényesítésének lépései

Az űrlapunkban 6 mezőt hoztunk létre az űrlapunkban, ezek a keresztnév, vezetéknév, e-mail, telefon, jelszó és üzenet.

1. Először hozzáadjuk a kötelező mezőellenőrzőt, ez az ellenőr azt mondja a felhasználóknak, hogy egy adott mezőre van szükség.

2. A következő az e-mail mező, ha a felhasználó nem ad meg érvényes e-mailt, akkor az e-mail-hitelesítőnk e-mail-ellenőrzési hibát dob.

3. Jelszóellenőrzésünkben beállítottuk a minimális és a maximális hosszúságot, a minimális hossz 5, a maximális pedig 8, így a felhasználó érvényes jelszót adhat meg 5 és 8 karakter között.

4. Végül beállítjuk a szükséges telefonszámot és üzenetmezőket, és konkrétan alkalmazzuk a számellenőrzést a telefonon.

Az űrlap hitelesítésének szöge JS-ben

index.html

Szögletes hatókör példa keresztnév 
 
Ez a bejelentés kötelező
Vezetéknév 
 
Ez a bejelentés kötelező
Email 
 
Ez a bejelentés kötelező
 
Nem érvényes e-mail
Telefon 
 
Ez a bejelentés kötelező
 
Ez nem érvényes telefon
Jelszó 
 
Ez a bejelentés kötelező
a mesterséges intelligencia tanfolyamának előfeltételei
 
Jelszó 5 és 8 karakter között lehet
Üzenet 
 
Ez a bejelentés kötelező
Beküldés

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ hatókör) {})

Beszéljünk valamilyen érvényesítési irányelvről, amelyet a következő formában használunk:

• ng szükséges : A szükséges mező megadásához
• ng-show : A hibaüzenet megjelenítése a feltétel alapján (ellenőrizze az érvényesítési tulajdonságokat)
• minhosszúságú : Minimális hosszúság biztosításához
• ng-maxlength : A maximális hosszúság biztosításához
• mintázatú : Megfelelni egy adott mintának
• ng-modell : Kötözi a mezőt olyan érvényesítési tulajdonságokkal, mint a $ error, $ valid stb.

Ezzel véget értünk a Validation in Angular JS cikkben. Remélem, megértette a különféle szempontokat, amelyeket figyelembe kell venni a Validation for Angular JS-ben.

Ha többet szeretne megtudni az Angular frameworkről, akkor nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés segít megérteni a szögletes elmélyülést, és elsajátítja a téma elsajátítását.

Van egy kérdésünk? Kérjük, említse meg a cikk megjegyzéseket tartalmazó szakaszában, és mi kapcsolatba lépünk Önnel.