El. pašto ir URL įvedimo laukų validacija HTML formose

Šiame pamokyme sužinosi visus svarbiausius elektroninio pašto adresų ir URL įvedimo laukų aspektus HTML formose. Tikslas yra parodyti, kaip veiksmingai įgyvendinti šių įvesčių validaciją ir pritaikyti stilių skirtingiems įvesties būsenoms. Tai ne tik pagerins vartotojo patirtį, bet ir pagerins surinktų duomenų kokybę.

Svarbiausios išvados

• Išmoksi pagrindinį elektroninio pašto ir URL įvedimo laukų HTML validacijos struktūrą.
• Taip pat sužinosi, kaip naudojant CSS gali būti vizualiai grąžinama atgalinė informacija vartotojams, kai įvestis yra neteisinga.
• Bus paaiškinta naudojimasis šablonais papildomai elektroninio pašto adresų ir URL validacijai.

Žingsnis po žingsnio instrukcija

1. Sukurti pagrindinį elektroninio pašto įvedimo lauką

Pradėkite kurti standartinį įvesties lauką elektroniniam paštui. Čia turite nurodyti tipą kaip „email“, kad naršyklė automatiškai patikrintų įvestį.

HTML šis įvesties laukas bus tvarkomas kaip laukas, kuriame tikimasi elektroninio pašto adreso, ir netinkamai įvestos duomenys bus vizualiai grąžinami. Kai vartotojas pradeda įvestį, fono spalva pakeičiama į rožinę, nurodant, kad kažkas yra neteisinga.

2. Elektroninio pašto adreso validacija

Elektroninio pašto adreso validacija vyksta pagal paprastas taisykles. Turi būti bent viena „@“ ženklas, paskui bent vienas kitas simbolis. Tai yra pagrindinė NLP validacija. Tačiau ši validavimo taisyklė nėra pakankama, kad būtų garantuojama, jog elektroninis paštas iš tikrųjų egzistuoja.

Pavyzdžiui, neteisingas elektroninio pašto adresas būtų „bla@“. Tokiu atveju formos siuntimas blokuojamas, o vartotojas mato klaidų pranešimą.

3. Patternų naudojimas tiksliniam validavimui

Norint pasiekti tikslesnę validaciją, galima naudoti atributą „pattern“. Naudodamas reguliarius išraiškas (Regex), gali nustatyti, kad elektroninio pašto adresas atitiktų tam tikras sąlygas, pvz., specifinę domeną.

Naudodamasis šia papildoma validacija, įsitikinsi, kad priimami tik teisingi elektroniniai pašto adresai, toki, kaip, pvz., tik Gmail arba GMX adresai.

4. Privalomosios įvesties ir stiliaus nustatymas

Paskatinti užpildyti elektroninio pašto lauką gali pridėjus atributą „required“. Jei vartotojas bandys siųsti formą be įvesties, jis nedelsiant gaus vizualinę grąžinamąją informaciją.

Neteisingų įvesčių stiliaus nustatymui CSS galima naudoti selektorių ":invalid". Taip laukas bus raudonas, primenantis vartotojui, kad įvestis yra neteisinga.

5. URL įvedimo lauko kūrimas

Panašiai kaip su elektroniniu paštu, svarbu sukurti atitinkamą įvedimo lauką URL adresams. Nustatykite tipo reikšmę kaip „url“, kad naršyklė taip pat patikrintų įvestį čia.

6. URL validacija

Pagrindinės reikalavimai teisingai URL apima tai, kad jis prasideda nuo „http://“ arba „https://“ ir turi bent vieną sekantį simbolį. Jei vartotojas tiesiog įveda „https“, tai nėra pakankama informacija.

Taikoma tas pats principas kitoms protokolams, pvz., „ftp“. Jei įvestis neatitinka reikalavimų, naršyklė suteikia grąžinamąją informaciją ir neleidžia siųsti formos.

7. Išplėstinė URL patternų validacija

Siekiant tikslinės validacijos tam tikriems šablonams, tokiems kaip „https://www.pavyzdys.com“, rekomenduojama taip pat naudoti „pattern“ atributą, padėsiantį jūsų vartotojams įvesti teisingus URL adresus.

8. Vartotojo draugiškumas mobiliuose įrenginiuose

Vienas iš didelių pranašumų, kai naudojami "email" ir "url" tipai formose, yra pagerintas vartotojo draugiškumas mobiliuose įrenginiuose. Klaviatūra optimaliai prisitaiko, kad palengvintų vartotojams įvesti el. pašto adresus ir URL adresus.

Santrauka

Šiame vadovėlyje aptarėme pagrindinius elektroninių paštų adresų ir URL adresų patvirtinimo kriterijus interneto formose. Jūs išmokote, kaip atlikti paprastą ir išplėstinį patvirtinimą bei pritaikyti vartotojo atsiliepimus CSS, siekiant sukurti geresnį vartotojo patyrimą.