Kuinka toteuttaa muodon vahvistus kulma-JS: ssä?

Tämä artikkeli antaa sinulle yksityiskohtaisen ja kattavan tietämyksen siitä, miten lomakkeiden vahvistus toteutetaan kulma-JS: ssä esimerkkien avulla

Vahvistus on menetelmä todentaa käyttäjä. Sitä käytetään kaikissa verkkotekniikoissa, kuten ja . Mutta tänään keskitymme validointiin kulma-JS: ssä seuraavassa järjestyksessä:

Mikä on lomakkeen vahvistus?

Lomakkeen vahvistus on tekniikka, jolla voimme vahvistaa HTML-lomakkeen. Otetaan yksinkertainen esimerkki siitä, että käyttäjällä on HTML-muoto ja että HTML-lomakkeella on erilaisia ​​kenttiä. Nämä kentät validoidaan lomakkeen validatorilla, kun haluamme vahvistaa lomakkeen, meidän on vain tarkistettava tietyn kentän arvo validointilausekkeella .



validation-in-angular-jsJos säännöllinen lauseke ja kentän arvo ovat samat, voimme sanoa, että muoto on vahvistettu. HTML-lomakkeessa on erityyppisiä tarkistuksia, kuten sähköposti, vaadittu, min, max, salasana jne.

Lomakkeen vahvistus kulmassa JS

Puhutaan siitä, kuinka voimme vahvistaa muodon kulmikkaalla JS: llä. Kulma-JS tarjoaa erityyppisiä lomakkeen vahvistusominaisuuksia, joita voimme käyttää lomakkeen vahvistamiseen tai tietojen saamiseen lomakkeesta.

  • $ voimassa : Tämä ominaisuus kertoo, onko kenttä kelvollinen, soveltamalla siihen asianmukaista sääntöä.

  • $ virheellinen : Kuten nimi sanoo virheelliseksi, tämä ruutu säätä, kenttä on virheellinen tai ei perustu asianmukaiseen sääntöön.

  • $ koskematon : Se palauttaa arvon tosi, kun lomakkeen syöttökenttää ei käytetä.

  • $ likainen : Se palauttaa arvon tosi, kun lomakkeen syöttökenttää käytetään.

  • $ kosketti : Totuus, jos tulo on epäselvä.

Lomakkeen käyttö: .

Tulon käyttäminen: ..

Selitetään nyt lomakkeen vahvistus kulmallisessa JS: ssä esimerkillä, joten ensin tehdään kaksi tiedostoa, yksi on app.js ja toinen index.html. Index.htm-tiedosto sisältää yksinkertaisen HTML-lomakkeen, jolla on kulmainen vahvistus, ja app.js-tiedostossamme on taustakoodi, joka käsittelee lomakkeen validoinnin index.html-sivulla.

index.htmlsivun sisältö muodostaanovalidaattiomaisuus ja mitä se tarkalleen tarkoittaa?

Lomaketunnisteen novalidate-ominaisuus kertoo HTML: lle, että voimme käyttää mukautettua lomaketarkistusta. Jos emme anna novalidate-ominaisuutta, ja HTML-muoto vahvistetaan käyttämällä HTML5: n oletuslomakkeen validointiominaisuuksia.

Lomakkeen validoinnin vaiheet

Lomakkeessamme olemme luoneet lomakkeeseen 6 kenttää, jotka ovat etunimi, sukunimi, sähköpostiosoite, puhelin, salasana ja viesti.

  1. Ensin lisätään vaadittu kentän vahvistaja, tämä vahvistaja kertoo käyttäjille, että tietty kenttä vaaditaan.

  2. Seuraava on sähköpostikenttä, jos käyttäjä ei anna kelvollista sähköpostia, sähköpostivahvistin heittää sähköpostin vahvistusvirheen.

    asenna php Windows 8: een
  3. Asetamme salasanan vahvistuksessa vähimmäis- ja enimmäispituuden. Pienin pituus on 5 ja suurin pituus 8, jotta käyttäjä voi antaa kelvollisen salasanan, joka on 5-8 merkkiä.

  4. Lopuksi asetamme vaaditut puhelimet ja viestikentät ja nimenomaan sovellamme numeroiden vahvistusta arkistoituun puhelimeen.

Lomakkeen validointikoodi kulma-JS: ssä

index.html

Kulma-alueen esimerkki Etunimi 

Tämä arkistointi vaaditaan

Sukunimi

Tämä arkistointi vaaditaan

Sähköposti

Tämä arkistointi vaaditaan

Virheellinen sähköpostiosoite

Puhelin

Tämä arkistointi vaaditaan

Tämä ei ole kelvollinen puhelin

Salasana

Tämä arkistointi vaaditaan

Salasana 5-8 merkkiä

Viesti

Tämä arkistointi vaaditaan

Lähetä

app.js

var app = kulmamoduuli ('ngValidApp', []) app.controller ('ngValidController', funktio ($ -alue) {})

Puhutaan joistakin validointidirektiivistä, jota käytetään muodossa:

  • vaaditaan : Vaaditun kentän toimittamisesta
  • ng-show : Virhesanoman näyttäminen ehdon perusteella (tarkista vahvistusominaisuudet)
  • minimi pituus : Vähimmäispituuden tarjoamiseksi
  • ng-maksimipituus : Suurimman pituuden tarjoamiseksi
  • kuvion : Tietyn mallin vastaamiseksi
  • ng-malli : Sitoo kentän vahvistusominaisuuksilla, kuten $ error, $ valid jne.

Tämän avulla olemme päättyneet tämän vahvistus Angular JS -artikkelissa. Toivon, että sait ymmärryksen erilaisista asioista, jotka on otettava huomioon lomakkeen validoinnissa kulmikas JS: ssä.

Jos haluat oppia lisää kulmakehyksestä, tutustu meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus auttaa sinua ymmärtämään kulma syvällisesti ja auttaa saavuttamaan aiheen hallinnan.

Onko sinulla kysymys meille? Mainitse se tämän artikkelin kommenttiosassa ja palaamme sinuun.