Vahvistus on prosessi, jolla varmistetaan tietojen oikeellisuus ja täydellisyys.
Oletetaan tosielämän esimerkissä sivusto, joka edellyttää rekisteröintilomakkeen täyttämistä, ennen kuin pääsemme täysin sivustolle. Rekisteröintisivulla olisi syöttökentät käyttäjätunnukselle, salasanalle, sähköpostitunnukselle ja niin edelleen.
Kun käyttäjä lähettää lomakkeen, normaalisti vahvistus tapahtuu ennen kuin yksityiskohdat lähetetään palvelimelle. Tämä vahvistus pyrkii varmistamaan parhaalla mahdollisella tavalla, että syötekenttien tiedot syötetään oikealla tavalla.
Esimerkiksi sähköpostitunnuksen on aina oltava muodossa Tämä sähköpostiosoite on suojattu spamboteilta. Tarvitset JavaScriptin käyttääksesi sitä. ; jos joku syöttää vain käyttäjätunnuksen sähköpostiosoitteeseen, vahvistajan pitäisi ihannetapauksessa epäonnistua. Joten validoinnissa tarkastellaan näiden perustarkastusten tekemistä ennen kuin yksityiskohdat lähetetään palvelimelle jatkokäsittelyä varten.
Tässä opetusohjelmassa opit-
- Lomakkeen vahvistus HTML5: llä
- Lomakkeen vahvistus käyttämällä $ dirty, $ valid, $ invalid, $ pristine
- Lomakkeen vahvistus AngularJS Auto Validate -sovelluksella
- Käyttäjän palaute Ladda-painikkeilla
Lomakkeen vahvistus HTML5: llä
Lomakkeen vahvistus on prosessi, jolla käyttäjä validoi verkkolomakkeeseen sisältyvät tiedot ennen niiden lähettämistä palvelimelle. On aina parempi vahvistaa tiedot itse asiakaspuolella. Tämä johtuu siitä, että se lisää vähemmän yleiskustannuksia, jos käyttäjälle oli esitettävä lomake uudelleen, jos syötetyt tiedot olivat väärät.
Katsotaanpa, miten lomakkeiden vahvistus 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änimi, salasana, sähköpostitunnus ja ikä.
Lomakkeessa on vahvistusvalvonta sen varmistamiseksi, että käyttäjä syöttää tiedot oikealla tavalla.
Event Registration Guru99 Global Event
Koodin selitys:
- Tekstinsyöttötyypissä käytämme 'pakollinen' -attribuuttia. Tämä tarkoittaa, että tekstiruutu ei voi olla tyhjä, kun lomake lähetetään, ja tekstilaatikossa pitäisi olla jonkinlainen teksti.
- Seuraava syöttötyyppi on salasana. Koska syötetyyppi on merkitty salasanana, kun käyttäjä syöttää kenttään minkä tahansa tekstin, se peitetään.
- Koska syötetyyppi on määritetty sähköpostiksi, kentän tekstin on vastattava mallia. Tämä sähköpostiosoite on suojattu spamboteilta. Tarvitset JavaScriptin käyttääksesi sitä. .
- Kun syötetyyppi on merkitty numerona, jos käyttäjä yrittää kirjoittaa mitä tahansa merkkiä näppäimistöllä tai aakkosilla, sitä ei syötetä tekstiruutuun.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Jos haluat nähdä lomakkeen vahvistuksen toiminnassa, napsauta Lähetä-painiketta kirjoittamatta mitään tietoja ruudulle.
Kun Lähetä-painiketta on napsautettu, tulee ponnahdusikkuna, jossa näkyy vahvistusvirhe, jonka kenttä on täytettävä.
Joten vaadituksi merkityn ohjausobjektin vahvistus aiheuttaa virheilmoituksen, jos käyttäjä ei kirjoita arvoa tekstikenttään.
Kun käyttäjä syöttää minkä tahansa arvon salasanaohjaukseen, huomaat merkin *, jota käytetään syötettävien merkkien peittämiseen.
Syötä sitten väärä sähköpostiosoite ja napsauta Lähetä-painiketta. Kun lähetyspainiketta on napsautettu, näkyviin tulee ponnahdusikkuna, joka osoittaa vahvistusvirheen, jonka kentässä on oltava @ -merkki.
Joten sähköpostin ohjausobjektiksi merkityn ohjausobjektin vahvistus aiheuttaa virheilmoituksen, jos käyttäjä ei kirjoita oikeaa sähköpostitunnusta tekstikenttään.
Lopuksi, kun yrität syöttää mitään merkkejä ikäteksti-ohjaimessa, sitä ei syötetä ruudulle. Ohjaus täyttää arvon vasta, kun ohjausobjektiin on syötetty numero.
Lomakkeen vahvistus käyttämällä $ dirty, $ valid, $ invalid, $ pristine
AngularJS tarjoaa lisäominaisuudet validointia varten. AngularJS tarjoaa seuraavat ominaisuudet ohjaimille validointia varten
- $ dirty - Käyttäjä on ollut vuorovaikutuksessa ohjauksen kanssa
- $ valid - Kentän sisältö on kelvollinen
- $ invalid - Kentän sisältö on virheellinen
- $ pristine - Käyttäjä ei ole vielä ollut vuorovaikutuksessa ohjauksen kanssa
Alla on vaiheet, jotka on noudatettava kulmavarmistuksen suorittamiseksi.
Vaihe 1) Käytä ei vahvista -ominaisuutta ilmoittaessasi lomaketta. Tämä ominaisuus kertoo HTML5: lle, että vahvistuksen tekisi AngularJS.
Vaihe 2) Varmista, että lomakkeelle on määritetty nimi. Syynä tähän on se, että kulmavahvistusta suoritettaessa käytetään lomakkeen nimeä.
Vaihe 3) Varmista, että jokaisella ohjaimella on myös määritetty nimi. Syynä tähän on se, että kulmavalvontaa suoritettaessa käytetään kontrollinimeä.
Vaihe 4) Tarkista ng-show-käskyllä ohjausobjektien $ dirty, $ invalid ja $ valid -ominaisuudet.
Katsotaanpa esimerkkiä, joka sisältää edellä mainitut vaiheet.
Esimerkissämme
Meillä on vain yksinkertainen tekstikenttä, jossa käyttäjän on kirjoitettava aiheen nimi tekstikenttään. Jos tätä ei tehdä, vahvistusvirhe käynnistyy ja virheilmoitus näytetään käyttäjälle.
Event Registration Guru99 Global Event
Koodin selitys:
- Huomaa, että olemme antaneet lomakkeelle nimen "myForm". Tätä vaaditaan käytettäessä AngularJS-vahvistuksen lomakkeen ohjausobjekteja.
- "Novalidate" -ominaisuuden avulla varmistetaan, että HTML-muoto antaa AngularJS: n suorittaa validoinnin.
- Tarkistamme ominaisuudet "$ dirty" ja "$ invalid" ng-show-direktiivin avulla. Tämä tarkoittaa, että jos tekstilaatikkoa on muokattu, ominaisuuden "$ dirty" arvo on tosi. Lisäksi, jos tekstikentän arvo on nolla, "$ invalid" -ominaisuus tulee totta. Joten jos molemmat ominaisuudet ovat totta, vahvistus epäonnistuu ohjauksessa. Näin ollen, jos molemmat arvot ovat totta, myös ng-show tulee totta ja alue-ohjaus punaisilla merkkeillä näytetään.
- Tässä tarkistamme "$ error" -ominaisuuden, joka myös arvioi arvon tosi, koska olemme maininneet ohjausobjektille, että arvo on syötettävä ohjausobjektille. Tällöin, kun tekstiruutuun ei ole syötetty tietoja, span-säätimessä näkyy teksti "Käyttäjänimi vaaditaan".
- Jos tekstiruudun ohjausarvo on virheellinen, haluamme myös poistaa Lähetä-painikkeen käytöstä, jotta käyttäjä ei voi lähettää lomaketta. Käytämme "ng-disabled" -ominaisuutta kontrollissa tämän tekemiseen ohjauksen "$ dirty" ja "$ invalid" -ominaisuuksien ehdollisen arvon perusteella.
- Ohjaimessa asetamme vain tekstilaatikon arvon alkuarvoksi tekstin 'AngularJS'. Tämä tehdään vain asettamaan jokin oletusarvo tekstiruudulle, kun lomake näytetään ensimmäisen kerran. Se esittelee paremmin, miten validointi tapahtuu tekstilaatikkokentässä.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Kun lomake näytetään alun perin, tekstiruutu näyttää "AngularJS" -arvon ja "Lähetä-painike" on käytössä. Heti kun poistat tekstin ohjausobjektista, vahvistusvirhesanoma 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ä
- Aihe-tekstiruudussa ei ole aiheen nimeä. Siksi se käynnistää virheilmoituksen "Käyttäjätunnus vaaditaan".
Lomakkeen vahvistus AngularJS Auto Validate -sovelluksella
AngularJS: ssä on mahdollisuus vahvistaa kaikki lomakkeen ohjaimet 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 mitään erityiskoodia vahvistuksen suorittamiseksi tai virheilmoitusten näyttämiseksi. Tämän kaiken käsittelee JCS-AutoValidaten sisällä oleva koodi.
Katsotaanpa yksinkertaista esimerkkiä tämän saavuttamiseksi.
Tässä esimerkissä
Meillä on vain yksinkertainen lomake tekstiruutuohjaimella, joka on pakollinen kenttä. Virheilmoitus tulee näyttää, jos tätä ohjausobjektia ei ole täytetty.
Event Registration Guru99 Event
Koodin selitys:
- Ensin meidän on sisällytettävä komento "jcs-auto-validate.js", jolla on kaikki automaattisen vahvistuksen toiminnot.
- Meidän on varmistettava, että jokainen elementti, mukaan lukien "div tag", sijoitetaan "form-group" -luokkaan.
- On myös varmistettava, että jokainen elementti (joka on HTML-elementti, kuten sisääntulon hallinta, alueohjaus, div-ohjaus ja niin edelleen), kuten tulo-ohjaimet, sijoitetaan myös muotoryhmäluokkaan.
- Sisällytä jcs-autovalidate AngularJS JS -moduuliin.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Oletuksena, kun suoritat koodisi, yllä oleva lomake näytetään HTML-koodin mukaisesti.
Jos yrität lähettää lomakkeen, näyttöön tulee virheilmoitus: "Tämä kenttä on pakollinen". Kaikki tämä tapahtuu JCS-AutoValidate-vaihtoehdolla.
Käyttäjien palautteet Ladda-painikkeilla
"Ladda" -painikkeet ovat erityinen kehys, joka on rakennettu painikkeille JavaScriptiä varten, jotta painikkeille saadaan visuaalinen vaikutus.
Joten jos painikkeelle annetaan "ladda" -määritelmä ja sitä painetaan, spin-vaikutus näkyy. Painikkeella on myös erilaisia tietotyylejä, jotka tarjoavat lisää visuaalisia tehosteita.
Katsotaanpa esimerkkiä siitä, miten "ladda" -painikkeet näkyvät toiminnassa. Näemme vain yksinkertaisen lomakkeen, jossa on lähetyspainike. Kun painiketta painetaan, pyörimisvaikutus näkyy painikkeessa.
Event Registration Guru99 Event
Koodin selitys:
- Käytämme "ng-submit" -direktiiviä kutsuttaaksesi funktion nimeltä "submit". Tätä toimintoa käytetään lähetyspainikkeen ladda-määritteen muuttamiseen.
- Ladda-attribuutti on ladda-kehyksen erityinen attribuutti. Tämä ominaisuus lisää spin-vaikutuksen hallintaan. Asetamme ladda-attribuutin arvon lähetettävälle muuttujalle.
- Data-tyylinen ominaisuus on jälleen ladda-kehyksen tarjoama lisäattribuutti, joka vain lisää erilaisen visuaalisen tehosteen lähetyspainikkeeseen.
- AngularJS-ladda-moduuli on lisättävä AngularJS.JS-sovellukseen, jotta ladda-kehys toimisi.
- Aluksi määrittelemme ja asetamme muuttujan arvon, jonka nimi on 'lähettäminen' vääräksi. Tämä arvo asetetaan lähetyspainikkeen ladda-attribuutille. Asettamalla tämän aluksi vääräksi sanomme, että emme halua Lähetä-painikkeen olevan vielä ladda-vaikutus.
- Ilmoitamme toiminnon, jota kutsutaan, kun lähetyspainiketta painetaan. Tässä toiminnossa asetamme "lähettämisen" tosi. Tämä aiheuttaa ladda-vaikutuksen soveltamisen lähetyspainikkeeseen.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Kun lomake näytetään alun perin, lähetyspainike näytetään yksinkertaisessa muodossa.
Kun lähetyspainiketta painetaan, ohjaimen lähetysmuuttuja on tosi. Tämä arvo välitetään lähetyspainikkeen "ladda" -määritteelle, mikä aiheuttaa painikkeen pyörimisvaikutuksen.
Yhteenveto
- Tekstikentän HTML-ohjausobjektien vahvistus voidaan tehdä käyttämällä 'pakollinen' -attribuuttia.
- HTML5: ssä on lisätty uusia hallintalaitteita, kuten salasana, sähköposti ja numero, jotka tarjoavat oman vahvistuksensa.
- Lomakkeen vahvistus AngularJS: ssä hoidetaan tarkastelemalla lomakeohjaimen arvoja $ dirty, $ valid, $ invalid ja $ koskematon.
- Automaattinen vahvistus AngularJS-sovelluksissa voidaan saavuttaa myös JCS-automaattisen vahvistusmoduulin avulla.
- Ladda-painikkeet voidaan lisätä Angular.js-sovellukseen, jotta käyttäjälle saadaan hieman parannettu visuaalinen tunne, kun painiketta painetaan.