Grundlæggende formvalidering i JavaScript

Tidligere ville formvalidering forekomme på serveren, efter at en person allerede havde indtastet alle deres oplysninger og trykket på knappen Send.

Hvis oplysningerne var forkerte eller manglede, skulle serveren sende alt tilbage med en besked, der bad personen om at rette formularen, inden den sendes igen.

Dette var en langvarig proces og ville lægge en stor del af byrden på serveren.

I disse dage giver JavaScript en række måder at validere en formular data direkte i browseren, før den sendes til serveren.

Her er den HTML-kode, vi bruger i følgende eksempler:

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

Grundlæggende validering

Denne type validering involverer kontrol af alle obligatoriske felter og sørg for, at de er korrekt udfyldt.

Her er et grundlæggende eksempel på en funktion, validateder viser en advarsel, hvis brugernavnet og e-mail-adresseindgangene er tomme, ellers returneres det sandt:

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); 

Men hvad hvis nogen indtaster tilfældig tekst som deres e-mail-adresse? I øjeblikket vil validatefunktionen stadig være sand. Som du kan forestille dig, kan afsendelse af dårlige data til serveren føre til problemer.

Det er her, validering af dataformat kommer ind.

Validering af dataformat

Denne type validering ser faktisk på værdierne i formularen og verificerer, at de er korrekte.

Validering af e-mail-adresser er notorisk vanskelig - der er et stort antal legitime e-mail-adresser og værter, og det er umuligt at gætte alle gyldige kombinationer af tegn.

Når det er sagt, er der et par nøglefaktorer, der er almindelige i alle gyldige e-mail-adresser:

  • En adresse skal indeholde et @ og mindst et punkt (.) Tegn
  • Tegnet @ kan ikke være det første tegn i adressen
  • Det . skal komme mindst et tegn efter @-tegnet

Med dette i tankerne bruger udviklere måske regex til at afgøre, om en e-mail-adresse er gyldig eller ej. Her er en funktion, som Tyler McGinnis anbefaler på sin blog:

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

Tilføjet til koden fra det sidste eksempel, vil det se sådan ud:

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 formularbegrænsninger

Nogle af almindeligt anvendte HTML5-begrænsninger for er typeattributten (f.eks. type="password") maxlength, requiredOg disabled.

En mindre almindeligt anvendt begrænsning er patternattributten, der tager et JavaScript-regulært udtryk.

Mere information

  • Validering af formulardata | MDN
  • Validering af begrænsning | MDN