AngularJS formas pārbaude: TextBox, pogas klikšķis (piemērs)

Satura rādītājs:

Anonim

Apstiprināšana ir process, kas nodrošina datu pareizību un pilnīgumu.

Kā piemēru reālajā situācijā pieņemsim vietni, kurai pirms pilnīgas piekļuves šai vietnei ir jāaizpilda reģistrācijas veidlapa. Reģistrācijas lapā būtu ievades lauki lietotājvārdam, parolei, e-pasta ID utt.

Kad lietotājs iesniedz veidlapu, parasti pārbaude notiek vispirms, pirms detaļas tiek nosūtītas serverim. Veicot šo pārbaudi, pēc iespējas labāk mēģinās nodrošināt, ka ievades lauku informācija tiek ievadīta pareizā veidā.

Piemēram, e-pasta ID vienmēr ir jābūt formātā Šī e-pasta adrese ir aizsargāta no mēstuļu robotiem. Lai to apskatītu, jums jābūt aktivizētam JavaScript. ; ja kāds e-pasta ID ievadīs tikai lietotājvārdu, ideālā gadījumā validācija neizdosies. Tātad, pārbaudot, tiek veiktas šīs pamata pārbaudes, pirms detaļas tiek nosūtītas serverim tālākai apstrādei.

Šajā apmācībā jūs uzzināsiet

  • Veidlapas validācija, izmantojot HTML5
  • Veidlapas validācija, izmantojot $ dirty, $ valid, $ invalid, $ pristine
  • Veidlapas validācija, izmantojot AngularJS Auto Validate
  • Lietotāju atsauksmes ar Ladda pogām

Veidlapas validācija, izmantojot HTML5

Veidlapas pārbaude ir iepriekšējas validācijas process, ko lietotājs ievadījis tīmekļa veidlapā, pirms tā tiek nosūtīta serverim. Informāciju vienmēr ir labāk apstiprināt pašā klienta pusē. Tas ir tāpēc, ka tas rada mazāk pieskaitāmo izmaksu, ja lietotājam atkārtoti bija jāuzrāda veidlapa, ja ievadītā informācija bija nepareiza.

Apskatīsim, kā HTML5 formātā var veikt validāciju.

Šajā piemērā mēs parādīsim lietotājam vienkāršu reģistrācijas veidlapu, kurā lietotājam jāievada tāda informācija kā lietotājvārds, parole, e-pasta ID un vecums.

Veidlapā būs validācijas vadīklas, lai nodrošinātu, ka lietotājs informāciju ievada pareizi.

Event Registration

Guru99 Global Event


    Enter your user name:

   Enter your password:   

   Enter your email:        

   Enter your age:           

         

Koda skaidrojums:

  1. Teksta ievades tipam mēs izmantojam atribūtu “obligāti”. Tas nozīmē, ka, iesniedzot veidlapu, tekstlodziņš nevar būt tukšs, un tekstlodziņā jābūt kaut kādam tekstam.
  2. Nākamais ievades veids ir parole. Tā kā ievades tips ir atzīmēts kā parole, tad, kad lietotājs laukā ievadīs jebkuru tekstu, tas tiks maskēts.
  3. Tā kā ievades veids ir norādīts kā e-pasts, tekstam lodziņā jāatbilst modelim. Šī e-pasta adrese ir aizsargāta pret mēstuļu robotiem. Lai to apskatītu, jums jābūt aktivizētam JavaScript. .
  4. Ja ievades tips ir atzīmēts kā skaitlis, ja lietotājs mēģina ievadīt jebkuru rakstzīmi, izmantojot tastatūru vai alfabētu, tas netiks ievadīts tekstlodziņā.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Lai redzētu, kā darbojas veidlapas validācija, noklikšķiniet uz pogas Iesniegt, ekrānā neievadot nekādu informāciju.

Pēc noklikšķināšanas uz pogas Iesniegt parādīsies uznirstošais logs, kurā būs redzama validācijas kļūda, ka lauks ir jāaizpilda.

Tātad, pārbaudot vadības ierīci, kas tika atzīmēta kā nepieciešama, tiek parādīts kļūdas ziņojums, ja lietotājs teksta laukā neievada nevienu vērtību.

Kad lietotājs ievadīs jebkuru vērtību paroles vadībā, jūs pamanīsit simbolu *, ko izmanto, lai maskētu ievadītās rakstzīmes.

Pēc tam ievadīsim nepareizu e-pasta ID un noklikšķiniet uz pogas Iesniegt. Pēc noklikšķināšanas uz pogas Iesniegt parādīsies uznirstošais logs, kurā būs redzama validācijas kļūda, ka laukā jābūt simbolam @.

Tātad, pārbaudot vadību, kas tika atzīmēta kā e-pasta vadīkla, kļūdas ziņojums tiks parādīts, ja lietotājs teksta laukā neievadīs pareizu e-pasta ID.

Visbeidzot, mēģinot ievadīt kādas rakstzīmes vecuma teksta vadīklā, tās netiks ievadītas ekrānā. Vadīkla aizpildīs vērtību tikai tad, kad vadīklā tiks ievadīts skaitlis.

Veidlapas validācija, izmantojot $ dirty, $ valid, $ invalid, $ pristine

AngularJS nodrošina savas papildu īpašības validācijai. Apstiprināšanas nolūkos AngularJS kontrolēm nodrošina šādas īpašības

  • $ dirty - lietotājs ir mijiedarbojies ar vadību
  • $ valid - lauka saturs ir derīgs
  • $ invalid - lauka saturs nav derīgs
  • $ pristine - lietotājs vēl nav mijiedarbojies ar vadību

Tālāk ir norādītas darbības, kas jāievēro, lai veiktu leņķisko validāciju.

1. darbība. Deklarējot veidlapu, izmantojiet rekvizītu no validate no validate. Šis rekvizīts norāda HTML5, ka pārbaudi veiks AngularJS.

2. darbība. Pārliecinieties, vai veidlapai ir definēts nosaukums. Iemesls tam ir tāds, ka, veicot leņķisko pārbaudi, tiks izmantots formas nosaukums.

3. solis. Pārliecinieties, ka katrai vadības ierīcei ir definēts arī nosaukums. Iemesls tam ir tāds, ka, veicot leņķisko validāciju, tiks izmantots kontroles nosaukums.

4. solis. Izmantojiet direktīvu ng-show, lai pārbaudītu, vai vadīklām nav īpašību $ dirty, $ invalid un $ valid.

Apskatīsim piemēru, kurā iekļauti iepriekš minētie soļi.

Mūsu piemērā

Mums vienkārši būs vienkāršs teksta lauks, kurā lietotājam tekstlodziņā jāievada Tēmas nosaukums. Ja tas nav izdarīts, tiks aktivizēta validācijas kļūda, un lietotājam tiks parādīts kļūdas ziņojums.

Event Registration

Guru99 Global Event




Topic Name:
Username is required

Koda skaidrojums:

  1. Ņemiet vērā, ka veidlapai esam piešķīruši nosaukumu “myForm”. Tas ir nepieciešams, piekļūstot AngularJS validācijas veidlapas vadīklām.
  2. Īpašuma "novalidate" izmantošana, lai nodrošinātu, ka HTML forma ļauj AngularJS veikt validāciju.
  3. Mēs izmantojam direktīvu ng-show, lai pārbaudītu īpašumus "$ dirty" un "$ invalid". Tas nozīmē, ka, ja tekstlodziņš ir mainīts, rekvizīta "$ dirty" vērtība būs patiesa. Turklāt, ja tekstlodziņa vērtība ir nulle, īpašība "$ invalid" kļūs patiesa. Tātad, ja abi rekvizīti ir patiesi, vadības pārbaude neizdosies. Tādējādi, ja abas vērtības ir patiesas, kļūs patiesa arī ng-show, un tiks parādīta diapazona vadība ar sarkanajām krāsu rakstzīmēm.
  4. Šajā laikā mēs pārbaudām rekvizītu "$ error", kas arī tiek vērtēts kā patiess, jo vadībai esam minējuši, ka vadīklai jāievada vērtība. Šādā gadījumā, ja tekstlodziņā nav ievadīti dati, diapazona vadība parādīs tekstu "Lietotājvārds ir nepieciešams".
  5. Ja tekstlodziņa vadības vērtība nav derīga, mēs arī vēlamies atspējot pogu Iesniegt, lai lietotājs nevarētu iesniegt veidlapu. Mēs izmantojam rekvizītu "ng-invalīdi", lai to izdarītu, pamatojoties uz vadības rekvizītu "$ dirty" un "$ invalid" nosacīto vērtību.
  6. Kontrolierī mēs tikai iestatām tekstlodziņa sākotnējo vērtību uz tekstu “AngularJS”. Tas tiek darīts, lai tekstlodziņā iestatītu kādu noklusējuma vērtību, kad veidlapa tiek parādīta pirmo reizi. Tas labāk parāda, kā validācija notiek tekstlodziņa laukā.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Kad veidlapa sākotnēji tiek parādīta, tekstlodziņā tiek parādīta vērtība "AngularJS", un ir iespējota poga "Iesniegt". Tiklīdz noņemat tekstu no vadības pogas, tiek iespējots validācijas kļūdas ziņojums un poga Iesniegt ir atspējota.

Iepriekš redzamajā ekrānuzņēmumā tiek parādītas divas lietas

  • Iesniegšanas poga ir atspējota
  • Teksta lodziņā Tēma nav tēmas nosaukuma. Tādējādi tas aktivizē kļūdas ziņojumu "Lietotājvārds ir nepieciešams".

Veidlapas validācija, izmantojot AngularJS Auto Validate

AngularJS ir iespēja automātiski apstiprināt visas veidlapas vadīklas, nerakstot apstiprināšanai pielāgotu kodu. To var izdarīt, iekļaujot pielāgotu moduli ar nosaukumu "jcs-AutoValidate".

Kad šis modulis ir ievietots, jums nav jāievieto īpašs kods, lai veiktu pārbaudi vai parādītu kļūdu ziņojumus. To visu apstrādā kods, kas atrodas JCS-AutoValidate iekšpusē.

Apskatīsim vienkāršu piemēru, kā to panākt.

Šajā piemērā

Mums vienkārši būs vienkārša veidlapa ar tekstlodziņa vadību, kas ir obligāts lauks. Ja šī vadīkla nav aizpildīta, ir jāparāda kļūdas ziņojums.

Event Registration

Guru99 Event




Topic Name:

Koda skaidrojums:

  1. Pirmkārt, mums jāiekļauj skripts "jcs-auto-validate.js", kuram ir visas automātiskās validācijas funkcionalitāte.
  2. Mums jānodrošina, lai katrs elements, ieskaitot tagu "div", tiktu ievietots klasē "form-group".
  3. Tāpat jānodrošina, lai katrs elements (kas ir HTML elements, piemēram, ievades vadība, diapazona vadība, div vadība un tā tālāk), piemēram, ievades vadīklas, tiktu ievietoti arī formas grupas klasē.
  4. Iekļaujiet jcs-autovalidate savā AngularJS JS modulī.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Pēc noklusējuma, palaižot kodu, šī veidlapa tiks parādīta atbilstoši HTML kodam.

Ja mēģināt iesniegt veidlapu, tiks parādīts kļūdas ziņojums: "Šis lauks ir obligāts". To visu veic opcija JCS-AutoValidate.

Lietotāju atsauksmes ar Ladda pogām

"Ladda" pogas ir īpašs ietvars, kas izveidots pogām virs JavaScript, lai pogām piešķirtu vizuālu efektu, kad tās tiek nospiestas.

Tātad, ja pogai piešķir atribūtu "ladda" un tā tiek nospiesta, tiks parādīts griešanās efekts. Turklāt, lai nodrošinātu papildu vizuālos efektus, pogai ir pieejami dažādi datu stili.

Apskatīsim piemēru, kā redzēt pogas "ladda" darbībā. Mēs vienkārši redzēsim vienkāršu veidlapu, kurai ir poga Iesniegt. Nospiežot pogu, uz pogas tiks parādīts griešanās efekts.

Event Registration

Guru99 Event

Koda skaidrojums:

  1. Mēs izmantojam direktīvu "iesniegt ng", lai izsauktu funkciju ar nosaukumu "iesniegt". Šo funkciju izmantos, lai mainītu pogas Ladda atribūtu.
  2. Ladda atribūts ir īpašs Ladda ietvara atribūts. Tas ir šis atribūts, kas kontrolei pievieno griešanās efektu. Mēs iestatām Ladda atribūta vērtību mainīgajam, kas iesniedz.
  3. Datu stila rekvizīts atkal ir papildu atribūts, ko piedāvā ladda ietvars, kas vienkārši pievieno atšķirīgu vizuālo efektu iesniegšanas pogai.
  4. Lai Ladda ietvars darbotos, lietojumprogrammai AngularJS.JS jāpievieno modulis 'AngularJS-ladda'.
  5. Sākotnēji mēs definējam un iestatām mainīgā lieluma vērtību, ko sauc par “iesniegšanu” uz false. Šī vērtība ir iestatīta pogas Iesniegt atribūtam ladda. Sākotnēji iestatot to uz nepatiesu, mēs sakām, ka mēs vēlamies, lai pogai Iesniegt vēl nebūtu Ladda efekta.
  6. Mēs deklarējam funkciju, kas tiek izsaukta, nospiežot pogu Iesniegt. Šajā funkcijā mēs iestatām “iesniegšanu” uz patiesu. Tas izraisīs Ladda efekta piemērošanu pogai Iesniegt.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Kad veidlapa sākotnēji tiek parādīta, poga Iesniegt tiek parādīta vienkāršā formā.

Nospiežot pogu Iesniegt, kontrolierī iesniegtais mainīgais tiek iestatīts uz true. Šī vērtība tiek nodota pogas Iesniegt atribūtam "ladda", kas izraisa pogas griešanās efektu.

Kopsavilkums

  • Tekstlodziņa HTML vadīklu pārbaudi var veikt, izmantojot atribūtu “obligāti”.
  • HTML5 ir pievienotas jaunas vadīklas, piemēram, parole, e-pasts un numurs, kas nodrošina viņu pašu apstiprinājumu kopu.
  • Veidlapas validācija pakalpojumā AngularJS tiek rūpēta, aplūkojot veidlapas vadīklas vērtības $ dirty, $ valid, $ invalid un $ pirmatnējās.
  • Automātisko validāciju AngularJS lietojumprogrammās var panākt arī, izmantojot moduli JCS-auto validate.
  • Ladda pogas var pievienot Angular.js lietojumprogrammai, lai lietotājam sniegtu mazliet uzlabotu vizuālo izjūtu, nospiežot pogu.