AngularJS-lomakkeen vahvistus lähetettäessä: Rekisteröintiesimerkki
Lomakkeen validointi AngularJS:ssä
Lomakkeen vahvistus AngularJS:ssä on prosessi, jolla varmistetaan, että lomakkeeseen syötetyt tiedot ovat oikein ja täydellisiä. Kun käyttäjä lähettää lomakkeen, vahvistus tapahtuu ensin ennen kuin tiedot lähetetään palvelimelle. Validointiprosessi varmistaa parhaalla mahdollisella tavalla, että syöttökenttien tiedot syötetään oikein.
Oletetaan todellisessa esimerkissä sivusto, joka edellyttää rekisteröitymislomakkeen täyttämistä, ennen kuin saamme täyden pääsyn tälle sivustolle. Rekisteröintisivulla olisi syöttökentät käyttäjätunnukselle, salasanalle, sähköpostiosoitteelle ja niin edelleen.
Esimerkiksi sähköpostitunnuksen on aina oltava muodossa käyttäjätunnus@sivusto.verkkotunnus; jos joku kirjoittaa vain käyttäjätunnuksen sähköpostitunnukseen, validoinnin pitäisi epäonnistua. Joten validointi tarkastelee näiden perustarkastusten tekemistä ennen kuin tiedot lähetetään palvelimelle jatkokäsittelyä varten.
Lomakkeen validointi HTML5:llä
Lomakkeen validointi on prosessi, jossa käyttäjän verkkolomakkeelle syöttämät tiedot esivahvistetaan ennen kuin ne lähetetään palvelimelle. On aina parempi vahvistaa tiedot itse asiakaspuolella. Tämä johtuu siitä, että se lisää lisäkustannuksia, jos käyttäjälle oli esitettävä lomake uudelleen, jos syötetyt tiedot olivat virheellisiä.
Katsotaanpa, kuinka AngularJS-lomakkeen validointi voidaan suorittaa HTML5:ssä.
Esimerkissämme näytämme käyttäjälle yhden yksinkertaisen rekisteröintilomakkeen, johon käyttäjän on syötettävä tiedot, kuten käyttäjätunnus, salasana, sähköpostiosoite ja ikä.
Lomakkeella on vahvistustoiminnot, joilla varmistetaan, että käyttäjä syöttää tiedot oikein.
<!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>
Koodin selitys
- Käytämme tekstinsyöttötyypillä "pakollinen"-attribuutti. Tämä tarkoittaa, että tekstilaatikko ei voi olla tyhjä lomaketta lähetettäessä, ja tekstilaatikossa pitäisi olla jonkinlaista tekstiä.
- Seuraava syöttötyyppi on salasana. Koska syöttötyyppi on merkitty salasanaksi, käyttäjän kirjoittaessa tekstiä kenttään se peitetään.
- Koska syöttötyypiksi on määritetty sähköposti, laatikon tekstin on vastattava kuviota nimi@sivusto.verkkotunnus.
- Kun syöttötyyppi on merkitty numeroksi, jos käyttäjä yrittää syöttää mitä tahansa merkkiä näppäimistöllä tai aakkosilla, sitä ei syötetä tekstiruutuun.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodisi selaimessa AngularJS-lomakkeen vahvistusta varten lähetyksen yhteydessä.
ulostulo
Nähdäksesi lomakkeen vahvistuksen toiminnassa, napsauta Lähetä-painiketta syöttämättä tietoja näytölle.
Kun lähetä-painiketta on napsautettu, näkyviin tulee ponnahdusikkuna, jossa näkyy vahvistusvirhe, jonka mukaan kenttä on täytettävä.
Joten vaadituksi merkityn ohjausobjektin validointi aiheuttaa virheilmoituksen, jos käyttäjä ei syötä tekstikenttään mitään arvoa.
Kun käyttäjä syöttää minkä tahansa arvon salasanan hallintaan, huomaat '*'-symbolin, jota käytetään peittämään syötettävät merkit.
Syötetään sitten väärä sähköpostiosoite ja napsauta Lähetä-painiketta. Kun lähetä-painiketta on napsautettu, näkyviin tulee ponnahdusikkuna, jossa näkyy vahvistusvirhe, jonka mukaan kentässä on oltava @-symboli.
Joten sähköpostiohjaukseksi merkityn ohjausobjektin vahvistus aiheuttaa virheilmoituksen, jos käyttäjä ei syötä oikeaa sähköpostitunnusta tekstikenttään.
Lopuksi, kun yrität kirjoittaa merkkejä ikätekstin ohjausobjektiin, niitä ei syötetä näytölle. Ohjauselementti täyttää arvon vain, kun ohjausobjektiin syötetään numero.
Lomakkeen vahvistus käyttämällä $likainen, $kelvollinen, $invalid, $koskematon
angularjs tarjoaa lisäominaisuuksia validointia varten. AngularJS tarjoaa seuraavat ominaisuudet valvontaa varten validointia varten
- $likainen – Käyttäjä on ollut vuorovaikutuksessa ohjauksen kanssa
- $voimassa – Kentän sisältö on voimassa
- $virheellinen – Kentän sisältö on virheellinen
- $koskematon – Käyttäjä ei ole vielä ollut vuorovaikutuksessa ohjauksen kanssa
Alla on vaiheet, jotka on noudatettava kulman validoinnin suorittamiseksi.
Vaihe 1) Käytä no validate -ominaisuutta lomakkeen ilmoittamisessa. Tämä ominaisuus kertoo HTML5:lle, että AngularJS tekee vahvistuksen.
Vaihe 2) Varmista, että lomakkeelle on määritetty nimi. Syynä tähän on se, että Angular-tarkistusta suoritettaessa käytetään lomakkeen nimeä.
Vaihe 3) Varmista, että jokaiselle ohjausobjektille on myös määritetty nimi. Syy tähän on se, että Angular-validointia suoritettaessa käytetään kontrollin nimeä.
Vaihe 4) Käytä ng-show -käsky tarkistaa säätimien $likainen, $invalid ja $valid ominaisuudet.
Katsotaanpa esimerkkiä, joka sisältää yllä mainitut vaiheet.
Esimerkissämme
Meillä on vain yksinkertainen tekstikenttä, johon käyttäjän on syötettävä aiheen nimi tekstiruutuun. Jos näin ei tehdä, käynnistyy vahvistusvirhe ja virheilmoitus näytetään käyttäjälle.
<!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>
Koodin selitys
- Huomaa, että olemme antaneet lomakkeelle nimen, joka on "myForm". Tämä vaaditaan käytettäessä AngularJS-vahvistuksen lomakkeen ohjaimia.
- Novalidate-ominaisuuden käyttäminen varmistaaksesi, että HTML-lomake sallii AngularJS:n suorittaa tarkistuksen.
- Käytämme ng-show-direktiiviä tarkistaaksemme ominaisuudet "$likainen" ja "$invalid". Tämä tarkoittaa, että jos tekstilaatikkoa on muokattu, "$dirty" -ominaisuuden arvo on tosi. Myös siinä tapauksessa, että tekstilaatikon arvo on tyhjä, "$invalid" -ominaisuudesta tulee tosi. Joten jos molemmat ominaisuudet ovat tosia, ohjaus epäonnistuu. Näin ollen, jos molemmat arvot ovat tosi, myös ng-show muuttuu todeksi ja span-säädin punaisilla värimerkeillä näytetään.
- Tässä tarkistamme "$error" -ominaisuuden, joka myös arvioi arvoksi tosi, koska olemme maininneet ohjausobjektille, että arvo tulee syöttää ohjausobjektille. Siinä tapauksessa, jos tekstiruutuun ei ole syötetty tietoja, span-säädin näyttää tekstin "Käyttäjätunnus vaaditaan".
- Jos tekstilaatikon ohjausarvo on virheellinen, haluamme myös poistaa lähetyspainikkeen käytöstä, jotta käyttäjä ei voi lähettää lomaketta. Käytämme ohjausobjektin "ng-disabled"-ominaisuutta tämän tekemiseen ohjausobjektin "$likainen"- ja "$invalid" -ominaisuuden ehdollisen arvon perusteella.
- Ohjaimessa asetamme vain tekstilaatikon arvon alkuarvon tekstiksi "AngularJS". Tämä tehdään vain jonkin oletusarvon määrittämiseksi tekstilaatikolle, kun lomake näytetään ensimmäisen kerran. Se esittelee paremmin, kuinka tekstilaatikkokentän validointi tapahtuu.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
ulostulo
Kun lomake näytetään alun perin, tekstiruudussa näkyy "AngularJS"-arvo ja "lähetä-painike" on käytössä. Heti kun poistat tekstin ohjausobjektista, vahvistusvirheviesti otetaan käyttöön ja Lähetä-painike poistetaan käytöstä.
Yllä oleva kuvakaappaus näyttää kaksi asiaa
- Lähetä-painike ei ole käytössä
- Aiheen tekstikentässä ei ole aiheen nimeä. Siksi se laukaisee virheilmoituksen "Käyttäjätunnus vaaditaan".
Lomakkeen vahvistus AngularJS Auto Valdate -toiminnolla
AngularJS:ssä on ominaisuus, jolla kaikki lomakkeen ohjausobjektit on tarkistettu automaattisesti ilman, että sinun tarvitsee kirjoittaa mukautettua koodia vahvistusta varten. Tämä voidaan tehdä sisällyttämällä mukautettu moduuli nimeltä "jcs-AutoValidate".
Kun tämä moduuli on paikallaan, sinun ei tarvitse asettaa erityistä koodia validoinnin suorittamiseen tai virheilmoitusten näyttämiseen. Tämä kaikki käsitellään JCS-AutoValidaten koodilla.
Katsotaanpa yksinkertaista esimerkkiä, kuinka tämä saavutetaan.
Tässä esimerkissä
Meillä on vain yksinkertainen lomake, jossa on tekstilaatikon ohjaus, joka on pakollinen kenttä. Näyttöön tulee virheilmoitus, jos tätä kohtaa ei ole täytetty.
<!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>
Koodin selitys
- Ensinnäkin meidän on sisällytettävä "jcs-auto-validate.js"-skripti, jossa on kaikki automaattisen vahvistuksen toiminnot.
- Meidän on varmistettava, että jokainen elementti, mukaan lukien "div-tunniste", sijoitetaan "form-group"-luokkaan.
- On myös varmistettava, että jokainen elementti (joka on HTML-elementti, kuten input-ohjaus, span-ohjaus, div-ohjaus ja niin edelleen), kuten tulosäätimet, sijoitetaan myös lomakeryhmäluokkaan.
- Sisällytä jcs-autovalidate AngularJS JS -moduuliisi.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
ulostulo
Oletuksena, kun suoritat koodisi, yllä oleva lomake näytetään HTML-koodin mukaisesti.
Jos yrität lähettää lomakkeen, näyttöön tulee virhesanoma, jossa lukee "Tämä kenttä on pakollinen". Kaikki tämä tehdään JCS-AutoValidate-vaihtoehdolla.
Käyttäjien palautteita Ladda-painikkeilla
"Ladda"-painikkeet on erityinen kehys, joka on rakennettu päälle oleville painikkeille JavaKäsikirjoitus antaa visuaalisen tehosteen painikkeille, kun niitä painetaan.
Joten jos painikkeelle annetaan "ladda"-attribuutti ja sitä painetaan, pyöräytystehoste näytetään. Lisäksi painikkeelle on saatavana erilaisia tietotyylejä visuaalisten lisätehosteiden tuottamiseksi.
Katsotaanpa esimerkkiä ladda-painikkeiden näkemisestä toiminnassa. Näemme vain yksinkertaisen lomakkeen, jossa on lähetyspainike. Kun painiketta painetaan, painikkeessa näkyy pyöritystehoste.
<!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>
Koodin selitys
- Käytämme "ng-submit" -ohje kutsua "lähetä" -nimistä funktiota. Tätä toimintoa käytetään lähetyspainikkeen ladda-attribuutin muuttamiseen.
- Lada-attribuutti on ladda-kehyksen erityinen attribuutti. Juuri tämä ominaisuus lisää pyöritystehosteen ohjaukseen. Asetamme ladda-attribuutin arvon muuttujalle lähetys.
- Data-style-ominaisuus on jälleen ladda-kehyksen tarjoama lisäattribuutti, joka vain lisää eri visuaalisen tehosteen lähetyspainikkeeseen.
- AngularJS-ladda-moduuli on lisättävä AngularJS.JS-sovellukseen, jotta ladda-kehys toimisi.
- Aluksi määrittelemme ja asetamme 'submitting'-nimisen muuttujan arvon false. Tämä arvo asetetaan lähetyspainikkeen ladda-attribuutille. Asettamalla tämän alun perin arvoon false, sanomme, että emme halua vielä lähetä-painikkeella olevan ladda-vaikutusta.
- Ilmoitamme toiminnon, jota kutsutaan, kun lähetyspainiketta painetaan. Tässä funktiossa asetamme "lähetetään" arvoon tosi. Tämä saa aikaan ladda-efektin käytön lähetyspainikkeessa.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
ulostulo
Kun lomake näytetään alun perin, lähetä-painike näytetään yksinkertaisessa muodossaan.
Kun lähetyspainiketta painetaan, ohjaimen lähetysmuuttuja on tosi. Tämä arvo välitetään lähetyspainikkeen "ladda"-attribuutille, joka aiheuttaa painikkeen pyöritysvaikutuksen.
Yhteenveto
- Tekstilaatikon HTML-säätimien validointi voidaan tehdä käyttämällä 'required'-attribuuttia.
- HTML5:ssä on lisätty uusia ohjaimia, kuten salasana, sähköpostiosoite ja numero, jotka tarjoavat oman vahvistussarjansa.
- Lomakkeen validointi AngularJS:ssä hoidetaan tarkastelemalla lomakeohjausobjektin arvoja $likainen, $valid, $invalid ja $pristine.
- Automaattinen validointi AngularJS-sovelluksissa voidaan saavuttaa myös käyttämällä JCS-auto validointimoduulia.
- Ladda-painikkeet voidaan lisätä Angular.js-sovellukseen, jotta käyttäjä saa hieman paremman visuaalisen vaikutelman, kun painiketta painetaan.