Katsaus HTML-lomakkeen validointiin

Verkkolomakkeet ovat usein web-sovellusten eniten käytetty ja välttämätön osa. Lomakkeen validointi on käyttäjän syöttämien tietojen validointiprosessi ennalta määritettyjen sääntöjen mukaisesti. Lomakkeen validointi voi tapahtua joko asiakaspuolella tai palvelinpuolella. HTML-muodon validointi on asiakaspuolen validoinnin muoto, jossa tietojen validointi suoritetaan ennen datan lähettämistä palvelimelle. HTML-lomakkeen validointi on merkittävä ja hyödyllinen, koska se parantaa asiakaspuolen käyttöliittymää ja verkkosovelluksen suorituskykyä.

HTML-lomakkeen validointi

HTML-muodon validointi voidaan suorittaa pääasiassa kahdella tavalla,

  • Sisäisen HTML5-toiminnon käyttäminen
  • JavaScriptin käyttö

1. Sisäisen HTML5-toiminnon käyttäminen

HTML5 tarjoaa tämän lomakkeen validoinnin ominaisuuden käyttämättä JavaScriptiä. Lomakeelementteihin lisätään vahvistusmääritteet, jotka mahdollistavat lomakkeen validoinnin meille automaattisesti. Validointimääritteet antavat meille mahdollisuuden määritellä erilaisia ​​sääntöjä lomakeelementeillemme. Niiden avulla voimme asettaa datan pituuden, asettaa rajan tietojen arvoille jne.

Katsotaanpa yksi yksinkertainen esimerkki HTML-muodon validoinnista käyttämällä sisäänrakennettuja lomakkeen validointielementtejä ja jatketaan sitten HTML-muotojen validointiin JavaScriptin avulla.

esimerkki

Lomakkeen validointi HTML5-vahvistusmääritteellä - Tässä esimerkissä käytämme vaadittua lomakkeen validointitunnistetta, joka aiheuttaa sen, että kentän tiedot on pakollista syöttää, muuten lomaketta ei toimiteta. Alla on koodinpätkä samalle verkkosivun muotoilulle.



.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)


Name:


Joten meillä on hyvin yksinkertainen verkkolomake yhdessä vain yhden nimitietokentän kanssa. Huomaa, että olemme käyttäneet vaadittua avainsanaa sisustunniste-elementissä.

Tulos :

Yritetään lähettää lomake kirjoittamatta arvoa nimikenttään. Lähettäessäsi saat virheilmoituksen "Täytä tämä kenttä", eikä lomaketta toimiteta.

Tulostus tyhjillä tiedoilla

Joten voidaan nähdä, että me emme ole lisänneet virheilmoitusta, ja sen antaa itse HTML.

Aivan kuten HTML: n tarjoama vaadittava ominaisuus, on olemassa erilaisia ​​lomaketunnisteita, joita voidaan käyttää. Alla on luettelo joistakin muodon validointitunnisteista,

  • minlength: Käytetään asettamaan elementin vaadittava minimipituus
  • maxlength: Käytetään asettamaan elementin vaadittava maksimipituus
  • kuvio: Käytetään säännöllisen lausekkeen määrittämiseen

2. JavaScriptin käyttö

JavaScriptiä käytetään laajalti HTML-muotojen validointiin, koska se tarjoaa enemmän tapoja mukauttaa ja asettaa validointisääntöjä. Myös joitain HTML5: n tarjoamia tunnisteita ei tueta vanhemmissa Internet Explorerin versioissa. JavaScriptiä käytetään pitkään lomakkeen validointiin.

JavaScript-muodon validoinnissa määrittelemme periaatteessa toiminnot tietojen validoimiseksi ennen niiden toimittamista palvelimelle. Voimme toteuttaa mitä tahansa logiikkaa, joka tarvitaan validointisääntöjen saavuttamiseen. JavaScript on joustavampi tällä tavalla, koska sääntöjen määrittelemiselle ei ole mitään rajoituksia. Mutta JavaScriptin tuntemus on välttämätöntä tämän toteuttamiseksi verrattuna muodon validointiin sisäänrakennettujen tunnisteiden avulla.

Katsotaan esimerkki lomakkeen validoinnista JavaScriptiä käyttämällä. Toteutamme saman esimerkin lomakkeesta vain yhdellä syötöllä kuin nimielementti.

Esimerkki:



.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)


Name:


function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)

Edellisestä esimerkistä olemme poistaneet vaaditun tagin lomakeelementistä “name”. Sen sijaan olemme lisänneet yhden tag-lähetyksen lomakeelementtiin. Kuten aiemmin mainittiin, me kirjoitamme toimintoa validointia varten, jolle tunniste lisätään.

Olemme kirjoittaneet validoitu muoto (), joka suorittaa validoinnin. Toteutamme saman säännön tarkistaaksemme, onko nimikenttään syötetyt tiedot tyhjät. Tämän tarkistamisen logiikka on napsauttamalla lähetä-painiketta, tätä toimintoa kutsutaan ja syötetty arvo tarkistetaan onko se tyhjä vai tyhjä. Toiminto palaa totta, jos tiedot eivät ole tyhjiä tai tyhjiä, mutta jos tiedot ovat tyhjiä tai tyhjiä, virheviesti näytetään käyttäjälle.

ulostulo

Jos yritämme lähettää lomakkeen syöttämättä mitään tietoja, meidän pitäisi saada virheilmoitus ruudulle. Kuten esimerkistä voidaan nähdä, olemme suunnitelleet virhesanoman samalla tavalla kuin mahdollista.

Tulostus tyhjillä tiedoilla

Johtopäätös - HTML-muodon validointi

Joten olemme nähneet hyvin yksinkertaisen esimerkin lomakkeen validoinnista asiakaspuolella. Pääasiassa on kaksi tapaa suorittaa HTML-muodon validointi. Ensin käytetään HTML5: n sisäänrakennettua toimintoa ja toiseksi JavaScriptiä. Ensimmäistä menetelmää käytettäessä meidän ei tarvitse kirjoittaa ylimääräistä koodia.

Suositellut artikkelit

Tämä on opas HTML-lomakkeiden validointiin. Tässä keskustellaan yleiskatsauksesta ja kahdesta HTML-muotojen validointitavasta, joilla ne voidaan suorittaa. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

  1. HTML-tapahtumat
  2. Versioita Html
  3. HTML5-elementit
  4. HTML-sovellukset

Luokka:

Web-kehitystyökalut