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

Ez a cikk részletes és átfogó ismereteket nyújt Önnek az űrlap-hitelesítés szögletes JS-ben történő megvalósításáról, példákkal

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



validation-in-angular-jsHa 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.