Lomakkeen vahvistus JavaScriptissä

Aikaisemmin lomakkeen vahvistus tapahtui palvelimella sen jälkeen, kun henkilö oli jo syöttänyt kaikki tietonsa ja painanut lähetyspainiketta.

Jos tiedot olivat virheellisiä tai puuttuivat, palvelimen on lähetettävä kaikki takaisin viestillä, joka kehottaa henkilöä korjaamaan lomakkeen ennen sen lähettämistä uudelleen.

Tämä oli pitkä prosessi ja asetti paljon taakkaa palvelimelle.

Nykyään JavaScript tarjoaa useita tapoja vahvistaa lomakkeen tiedot suoraan selaimessa ennen sen lähettämistä palvelimelle.

Tässä on HTML-koodi, jota käytämme seuraavissa esimerkeissä:

  Form Validation  // Form validation will go here     
    
Username
Email Address

Perusvahvistus

Tämän tyyppinen vahvistus edellyttää kaikkien pakollisten kenttien tarkistamista ja varmistamista, että ne on täytetty oikein.

Tässä on perusesimerkki toiminnosta, validatejoka näyttää ilmoituksen, jos käyttäjänimen ja sähköpostiosoitteen syötteet ovat tyhjiä, muuten se palauttaa arvon tosi:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate); 

Mutta entä jos joku kirjoittaa satunnaisen tekstin sähköpostiosoitteeksi? Tällä hetkellä validatetoiminto palaa edelleen tosi. Kuten voitte kuvitella, huonojen tietojen lähettäminen palvelimelle voi aiheuttaa ongelmia.

Siellä tulee datamuodon vahvistus.

Tietomuodon vahvistus

Tämän tyyppinen vahvistus tarkastelee tosiasiallisesti lomakkeen arvoja ja varmistaa, että ne ovat oikeita.

Sähköpostiosoitteiden vahvistus on tunnetusti vaikeaa - laillisia sähköpostiosoitteita ja isäntiä on valtava määrä, ja on mahdotonta arvata kaikkia kelvollisia merkkijärjestelmiä.

Kaikissa kelvollisissa sähköpostiosoitteissa on kuitenkin muutamia keskeisiä tekijöitä:

  • Osoitteen on sisällettävä yksi @ ja vähintään yksi piste (.)
  • @ -Merkki ei voi olla osoitteen ensimmäinen merkki
  • . täytyy olla vähintään yksi merkki @ -merkin jälkeen

Tässä mielessä ehkä kehittäjät käyttävät regexiä selvittääkseen, onko sähköpostiosoite kelvollinen vai ei. Tässä on toiminto, jota Tyler McGinnis suosittelee blogissaan:

const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true

Viimeisen esimerkin koodiin lisätty se näyttää tältä:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate); 

HTML5-lomakerajoitukset

Jotkut yleisesti käytetyistä HTML5-rajoituksista ovat typeattribuutti (esim. type="password") maxlength, requiredJa disabled.

Harvemmin käytetty rajoitus on patternominaisuus, joka ottaa JavaScriptin säännöllisen lausekkeen.

Lisää tietoa

  • Lomaketietojen validointi MDN
  • Rajoituksen validointi | MDN