Kaip įgyvendinti formos patvirtinimą kampiniame JS?

Patvirtinimas yra metodas patvirtinti Vartotojas. Jis naudojamas visose žiniatinklio technologijose, tokiose kaip ir . Bet šiandien mūsų dėmesys bus sutelktas į patvirtinimą kampiniu JS tokia tvarka:

• Kas yra formos patvirtinimas?
• Formos patvirtinimas kampiniu JS
• Formos patvirtinimo žingsniai
• Kodas

Kas yra formos patvirtinimas?

Formos patvirtinimas yra technika, kuria galime patvirtinti HTML formą. Paimkime paprastą pavyzdį, tarkime, kad vartotojas turi HTML formą ir kad HTML formoje yra skirtingi laukai. Šiuos laukus patvirtina formos tikrintuvas, kai norime patvirtinti formą, mums tiesiog reikia patikrinti konkretaus lauko vertę su tikrintuvo išraiška .

Jei reguliarioji išraiška ir lauko reikšmė yra vienodi, galime sakyti, kad mūsų forma yra patvirtinta. HTML formoje yra įvairių tipų patvirtinimai, pvz., El. Paštas, būtinas, min., Maks., Slaptažodis ir kt.

Formos patvirtinimas kampiniu JS

Pakalbėkime apie tai, kaip galime patvirtinti formą kampiniu JS. Kampinis JS pateikia įvairių tipų formos patvirtinimo ypatybes, kurias galime naudoti patvirtindami formą arba gaudami duomenis iš formos.

• $ galioja : Ši ypatybė nurodo, ar laukas galioja, ar ne, pritaikydamas tam tinkamą taisyklę.

• $ negalioja : Kaip pavadinime sakoma, kad ši plytelė yra netinkama, laukas yra netinkamas arba pagrįstas netinkama to taisykle.

  pitono klasė __init__

• $ nesugadintas : Tai bus teisinga, nes formos įvesties laukas nenaudojamas.

  
  
  

• $ purvinas : Tai bus teisinga, kai bus naudojamas formos įvesties laukas.

• $ palietė : BooleanTrue, jei įvestis buvo neryški.

Norėdami pasiekti formą: .

Norėdami pasiekti įvestį: ..

Dabar paaiškinkime formos patvirtinimą kampiniu JS su pavyzdžiu, todėl pirmiausia padarome du failus, vienas yra app.js, o kitas yra index.html. Mūsų faile index.htm yra paprasta HTML forma, turinti kampinį patvirtinimą, o faile app.js yra užpakalinis kodas, kuris tvarkys formos patvirtinimą index.html puslapyje.

Theindex.htmlpuslapio turinio forma sunovalidatasnuosavybė ir ką tai tiksliai reiškia?

Novalidate ypatybė formos žymoje nurodo HTML, kad galime naudoti pasirinktinį formos patvirtinimą. Jei mes nepateiksime savybės „novalidate“, o HTML forma bus patvirtinta naudojant HTML5 numatytąsias formos patvirtinimo ypatybes.

Formos patvirtinimo žingsniai

Savo forma mes sukūrėme 6 savo formos laukus, tai yra vardas, pavardė, el. Pašto adresas, telefonas, slaptažodis ir pranešimas.

1. Pirmiausia pridedame reikiamą laukų tikrintuvą, kuris patvirtina vartotojams, kad reikia konkretaus lauko.

2. Kitas yra el. Pašto laukas, jei vartotojas nepateikia jokio galiojančio el. Laiško, tada mūsų el. Pašto tikrintojas pateikia el. Pašto patvirtinimo klaidą.

3. Savo slaptažodžio patvirtinime nustatėme mažiausią ir didžiausią ilgį. Mažiausias ilgis yra 5, o maksimalus - 8, todėl vartotojas gali suteikti galiojantį slaptažodį nuo 5 iki 8 simbolių.

4. Galiausiai nustatome reikalingus telefono ir pranešimo laukus, konkrečiai, pritaikome numerio patvirtinimą pateiktame telefone.

Formos patvirtinimo kampiniu JS kodas

index.html

Kampinio taikymo srities pavyzdys Vardas 
 
Tai būtina pateikti
kaip sustabdyti programą java
Pavardė 
 
Tai būtina pateikti
El 
 
Tai būtina pateikti
 
Netinkamas el. Paštas
Telefonas 
 
Tai būtina pateikti
 
Tai nėra tinkamas telefonas
Slaptažodis 
 
Tai būtina pateikti
 
Slaptažodis nuo 5 iki 8 simbolių
Pranešimas 
 
Tai būtina pateikti
Pateikti

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', funkcija ($ sritis) {})

Pakalbėkime apie tam tikrą patvirtinimo direktyvą, naudojamą forma:

• reikalingas ng : Už reikiamo lauko pateikimą
• ng-šou : Norėdami parodyti klaidos pranešimą pagal sąlygą (patikrinkite patvirtinimo ypatybes)
• minlength : Už minimalų ilgį
• ng-maxlength : Už maksimalaus ilgio suteikimą
• iš modelio : Kad atitiktų konkretų modelį
• ng-modelis : Susieja lauką su patvirtinimo ypatybėmis, tokiomis kaip $ error, $ valid ir kt.

Tuo mes baigėme šį patvirtinimo „Angular JS“ straipsnyje. Tikiuosi, kad supratote įvairius dalykus, į kuriuos reikia atsižvelgti norint patvirtinti formą kampiniame JS.

Jei norite sužinoti daugiau apie kampinę sistemą, peržiūrėkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai padės jums giliau suprasti kampinį kampą ir padės jums įsisavinti šį dalyką.

Turite mums klausimą? Prašau tai paminėti šio straipsnio komentarų skyriuje ir mes su jumis susisieksime.