E-pasta un URL ievades laukumu validācija HTML veidlapās

Šajā rokasgrāmatā tu apgūsi visus svarīgos aspektus par e-pasta adreses un vietņu URL ievades laukiem HTML formās. Mērķis ir parādīt, kā efektīvi īstenot šo ievadu validāciju un pielāgot stilu dažādiem ievades statusiem. Tas ne tikai uzlabos lietotāja pieredzi, bet arī palielinās datu kvalitāti, ko tu iegūsti.

Svarīgākie secinājumi

• Tu iemācīsies pamata uzstādījumu un validāciju e-pastam un URL izmantojot HTML.
• Tāpat tu uzzināsi, kā ar CSS nodrošināt vizuālu atgriezenisko saiti lietotājiem, ja ievades ir nederīgas.
• Tiks izskaidrotas E-pastu adresēm un URL turpmākās validācijas izmantošanas pamati.

Pamācība soli pa solim

1. Izveidot pamata e-pasta ievades lauku

Sāc ar standarta ievades lauka izveidi e-pastam. Tev jāiestata tips kā "e-pasts", lai pārlūks automātiski validētu ievadi.

Tagad HTML apstrādā ievades lauku tā, it kā tas sagaidītu e-pasta adresi un, ja ievade ir nepareiza, vizuāli nodrošina atgriezenisko saiti. Kad lietotājs sāk ievadīt, fons kļūst rozā, lai norādītu, ka kas nav kārtībā.

2. E-pasta adreses validācija

E-pasta adreses validācija notiek ar vienkāršiem noteikumiem. Tajā jābūt vismaz vienam "@", pēc tam vismaz vēl vienam simbolam. Tas ir pamata NLP validējums. Tomēr šāda validēšanas regula nav pietiekama, lai garantētu, ka e-pasta adrese patiešām pastāv.

Piemērs par nederīgu e-pasta adresi būtu "bla@". Šajā gadījumā iesniegšanas forma tiek bloķēta, un lietotājs saņem kļūdas paziņojumu.

3. Patterns izmantošana precīzai validācijai

Lai sasniegtu precīzāku validāciju, vari izmantot atribūtu "pattern". Ar regulāru izteiksmi (Regex) vari noteikt, ka e-pasta adrese atbilst noteiktām prasībām, piemēram, konkrētai domenai.

Ar šo papildu validāciju nodrošini, ka tiek pieņemtas tikai derīgas e-pasta adreses, kā piemēram, tikai Gmail vai GMX adreses.

4. Nepieciešamā ievade un stilizācija

Lai nodrošinātu, ka e-pasta lauks tiek aizpildīts, var pievienot atribūtu "obligāts". Ja lietotājs mēģina nosūtīt formu bez ievades, viņš uzreiz saņems vizuālu atgriezenisko saiti.

Nederīgu ievadu stilizēšanai CSS var izmantot selektoru ":nederīgs". Tas iekrāso lauka fonu sarkani, lai brīdinātu lietotāju, ka ievade nav pareiza.

5. URL ievades lauka izveide

Līdzīgi kā ar e-pastu, ir svarīgi arī URL izvietot atbilstošu ievades lauku. Iestatiet tipu uz "URL", lai pārlūks validētu arī šeit ievadi.

6. URL validācija

Pamata prasības derīgam URL ietver to, ka tas sākas ar "http://" vai "https://" un ir vismaz viens sekojošs simbols. Ja lietotājs ievada tikai "https", tas nav pietiekami.

Tas pats princips attiecas arī uz citiem protokoliem, piemēram, "ftp". Ja ievade neatbilst nosacījumiem, pārlūks sniegs atsauksmes un neļaus nosūtīt formu.

7. Paplašināta validācija ar "patterns" URL

Lai padarītu validāciju precīzāku arī konkrētiem paraugiem, piemēram, "https://www.example.com", ir ieteicams izmantot "pattern" atribūtu, lai palīdzētu lietotājiem ievadīt pareizos URL.

8. Lietotāja draudzīgums mobilajos ierīcēs

Lielā priekšrocība, izmantojot "email" un "url" tipus veidlapās, ir uzlabots lietotāja draudzīgums mobilajās ierīcēs. Taustiņu padeve tiek optimāli pielāgota, lai lietotājiem būtu vieglāk ierakstīt e-pasta adreses un URL.

Kopsavilkums

Šajā vadlīnijā esam aplūkojuši galvenos kritērijus e-pasta adresēm un URL adresēm web-veidlapās. Tu esi iemācījies, kā veikt vienkāršus un vērā ņemamus validācijas pasākumus un pielāgot lietotāja atsauksmes izskatu izmantojot CSS, lai radītu labāku lietotāja pieredzi.