Validointi sähköposti- ja URL-kentissä HTML-lomakkeissa

Tässä oppaassa opit kaikki tärkeät näkökohdat sähköpostiosoitteiden ja URL-osoitteiden syöttökentistä HTML-lomakkeissa. Tavoitteena on näyttää, miten voit tehokkaasti toteuttaa näiden syötteiden validoinnin ja mukauttaa ulkoasua erilaisille syötetiloille. Tämä ei ainoastaan paranna käyttäjäkokemusta, vaan myös tietojen laadun, jotka tallennat.

Tärkeimmät oivallukset

• Ot opiksesi perusrakenteen ja validoinnin sähköpostille ja URL-osoitteelle käyttäen HTML:ää.
• Lisäksi opit, miten voit tarjota visuaalista palautetta käyttäjille CSS:n avulla, jos syötteet ovat virheellisiä.
• Käytön Patterns lisävalidoinnista sähköpostiosoitteille ja URL-osoitteille selostetaan.

Askelta-askeleelta-ohjeet

1. Luo perussähköpostisyöttökenttä

Aloita luomalla standardi syötekenttä sähköpostille. Tässä täytyy asettaa tyyppi "email", jotta selain validoi syötteen automaattisesti.

HTML käsittelee syötekenttää niin, että se odottaa sähköpostiosoitetta ja antaa visuaalisen palautteen virheellisestä syötöstä. Kun käyttäjä alkaa syöttää, tausta muuttuu vaaleanpunaiseksi, havainnoimaan että jokin on pielessä.

2. Sähköpostiosoitteen validointi

Sähköpostiosoitteen validointi perustuu yksinkertaisiin sääntöihin. On oltava vähintään yksi "@"-merkki, jonka jälkeen tulee vähintään yksi lisämerkki. Tämä on perus NLP-validointi. Tämä validointisääntö ei kuitenkaan riitä takaamaan, että sähköpostiosoite on todellinen.

Esimerkki virheellisestä sähköpostiosoitteesta olisi "bla@". Tällaisessa tapauksessa lomakkeen lähettäminen estetään, ja käyttäjä näkee virheilmoituksen.

3. Patternsien käyttö tarkempaan validointiin

Voit saavuttaa tarkemman validoinnin käyttämällä attribuuttia "pattern". Säännöllisen lausekkeen (Regex) avulla voit määrittää, että sähköpostiosoite vastaa tietyntyyppisiä vaatimuksia, esim. tiettyä verkkotunnusta.

Tämän lisävalidoinnin avulla varmistat, että hyväksytään ainoastaan kelvollisia sähköpostiosoitteita, kuten vain Gmail- tai GMX-osoitteita.

4. Vaadittava syöttö ja ulkoasun mukautus

Varmistaaksesi, että sähköpostikenttä täytetään, voit lisätä attribuutin "required". Jos käyttäjä yrittää lähettää lomakkeen ilman syöttöä, hän saa välittömästi visuaalista palautetta.

Virheellisten syötteiden ulkoasun mukauttamiseen voit käyttää CSS:ssä valitsinta ":invalid". Tällöin kentän tausta muuttuu punaiseksi, varoittaen käyttäjää siitä, että syöte ei ole oikein.

5. Luo URL-osoitteiden syöttökenttä

Samanlaisesti kuin sähköpostille, myös URL-osoitteille on tärkeää luoda vastaava syötöselementti. Aseta tyyppi "url", jotta selain validoi syötteen myös täällä.

6. URL-osoitteen validointi

Perusvaatimukset kelvolliselle URL-osoitteelle ovat, että sen on aloitettava "http://" tai "https://" ja siinä pitää olla vähintään yksi seuraava merkki. Jos käyttäjä syöttää pelkästään "https", tämä ei riitä.

Sama periaate pätee muihin protokolliin, kuten "ftp". Jos syöttö ei täytä ehtoja, selain antaa palautetta eikä lomaketta voi lähettää.

7. Laajennettu validointi Patternsien avulla URL-osoitteille

Jotta validointi olisi tarkempaa myös tiettyjä malleja kuten "https://www.example.com" kohtaan, tulisi sinun käyttää myös "pattern"-attribuuttia auttaaksesi käyttäjiä syöttämään oikeellisia URL-osoitteita.

8. Käyttäjäystävällisyys mobiililaitteissa

Suuri etu "sähköposti"- ja "url"-tyyppien käytössä lomakkeissa on parantunut käyttäjäystävällisyys mobiililaitteissa. Näppäimistö on optimaalisesti mukautettu helpottamaan käyttäjien sähköpostiosoitteiden ja URL-osoitteiden kirjoittamista.

Yhteenveto

Tässä oppaassa käsiteltiin tärkeimpiä sähköpostiosoitteiden ja URL-osoitteiden validointikriteereitä verkkolomakkeissa. Olet oppinut suorittamaan yksinkertaisia ja monimutkaisia validointeja sekä muokkaamaan käyttäjäpalautetta CSS:llä paremman käyttäjäkokemuksen luomiseksi.