Šajā pamācībā tu iemācīsies, kā izveidot tīmekļa formas ar efektīvu klienta puses validāciju izmantojot JavaScript. Validācija ir svarīga, lai nodrošinātu, ka lietotāja ievadi ir pareizi un pilnīgi pirms datu nosūtīšanas serverim. Mēs aplūkosim dažādus validācijas aspektus, tostarp HTML5 atribūtu izmantošanu un lietotāja definēto validācijas loģikas ieviešanu JavaScript.
Galvenie secinājumi
- Ievades laukus var daļēji validēt ar HTML5 atribūtiem.
- JavaScript ļauj veikt rūpīgu, lietotāja definētu validāciju.
- Kļūdas ziņojumus var dinamiski izveidot, lai sniegtu lietotājiem noderīgus padomus.
Pamācība soli pa solim
Solis 1: Izveidot formas pamatstruktūru
Sākumā izveido vienkāršu HTML formu, kas ietver vienu ievades lauku priekš teikuma. Pārliecinies, ka iekļauj pattern atribūtu, lai veiktu pirmo validāciju.
Solis 2: Vienkārša pattern validācija
HTML formārā, varat izmantot pattern atribūtu, lai nodrošinātu, ka ievadītais teikums beidzas ar punktu. Pārbaudi vai validācija darbojas bez JavaScript.
Solis 3: JavaScript pievienošana
Lai uzlabotu validāciju, iekļauj JavaScript. Vari uzrakstīt skriptu, kas saņem ievades lauku un nodrošina validāciju. Sāc ar notikumu klausītāja pievienošanu izmaiņas notikumam.
Solis 4: Validācija ar JavaScript
JavaScript kodā pārbaudi, vai ievadītā vērtība patiešām beidzas ar punktu. Izmanto setCustomValidity metodi, lai parādītu pielāgotus kļūdu ziņojumus. Ja teikums nav derīgs, sniedz atbilstošu atgriezenisko saiti.
Solis 5: Kļūdas ziņojuma pielāgošana
Pielāgo kļūdu ziņojumus specifiski. Izmanto event.target.value, lai izlasītu, ko lietotājs ir ievadījis, un dinamiski pielāgo kļūdu ziņojumu.
Solis 6: Integrē HTML5 validācijas metrikas
Uzlabo jau esošo formu, izmantojot HTML5 iebūvētās validācijas metrikas. Pārbaudi, vai tavai teikuma arī atbilst pattern atribūts un savieno ar jau esošo JavaScript validāciju.
Solis 7: Validācija e-pastiem
Papildini formu ar papildu ievades lauku e-pasta adresēm. Šajā gadījumā tiek izmantota HTML5 tipa pārbaude, taču papildini arī ar lietotāja definētās validācijas izmantojot JavaScript.
Solis 8: Ievades uzvedības optimizācija
Lai optimizētu lietotāju ievades uzvedību, maini notikumu no izmaiņas uz ievadi kā notikumu klausītāju. Tādējādi ievade tiek nekavējoties validēta, kamēr lietotājs joprojām raksta.
Solis 9: Dinamiskas kļūdu ziņojumi
Ievies loģiku, kas ievieš specifisku dinamiku kļūdu ziņojumos. Informē lietotāju, kādēļ viņa ievade tika noraidīta, un sniedzi atbilstošus padomus balstoties uz to.
Solis 10: Pēdējā pārbaude
Pabeidzot veic visaptverošu pārbaudi. Pārbaudi formu ar dažādām ievadēm un pārliecinies, ka visi iespējamie kļūdu gadījumi ir apsvērti.
Kopsavilkums
Šajā pamācībā tu esi iemācījies, kā implementēt vienkāršas, bet efektīvas validācijas ar JavaScript un HTML5 tīmekļa formās. Tu esi redzējis validācijas pamatus, izmantojot paraugus un lietotāja definēto loģiku, kā arī kā sniegt atsauksmes lietotājiem par ievades kļūdām, lai uzlabotu viņu pieredzi.
Bieži uzdotie jautājumi
Kā darbojas setCustomValidity metode?setCustomValidity metode ļauj iestatīt pielāgotu kļūdas paziņojumu ievades laukā, kas tiks rādīts, ja validācija neizdodas.
Kas ir atšķirība starp 'change' un 'input' notikumu?'input' notikums tiek aktivizēts katru reizi, kad lietotājs ievada kaut ko ievades laukā, savukārt 'change' notikums tiek aktivizēts tikai pēc lauka pametšanas.
Kā pārbaudīt e-pasta lauka derīgumu?Izmantojiet HTML5 tipam atbilstīgo iespēju, lai pārliecinātos, ka norādītie e-pasta adreses ir derīgā formātā un lai parādītu viegli pārbaudāmus kļūdas paziņojumus.
