Põhivormi valideerimine JavaScriptis

Varem toimus vormi valideerimine serveris pärast seda, kui inimene oli juba kogu oma teabe sisestanud ja vajutanud nuppu Esita.

Kui teave oli vale või puudus, peaks server saatma kõik asjad tagasi sõnumiga, mis käsib inimesel vormi parandada enne selle uuesti esitamist.

See oli pikk protsess ja paneks serverile suure koormuse.

Tänapäeval pakub JavaScript mitmeid viise, kuidas vormi andmed enne brauserisse saatmist enne serverisse saatmist kinnitada.

Siin on HTML-kood, mida kasutame järgmistes näidetes:

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

Põhiline valideerimine

Seda tüüpi valideerimine hõlmab kõigi kohustuslike väljade kontrollimist ja nende nõuetekohase täitmise kontrollimist.

Siin on põhinäide funktsioonist, validatemis kuvab märguande, kui kasutajanime ja e-posti aadressi sisestused on tühjad, vastasel juhul tagastatakse tõene:

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

Aga mis siis, kui keegi sisestab oma e-posti aadressina juhusliku teksti? Praegu validatetagastatakse funktsioon endiselt tõeseks. Nagu võite ette kujutada, võib halbade andmete serverisse saatmine põhjustada probleeme.

Seal tuleb sisse andmevormingu valideerimine.

Andmevormingu valideerimine

Seda tüüpi valideerimine vaatleb tegelikult vormis olevaid väärtusi ja kontrollib, kas need on õiged.

E-posti aadresside kinnitamine on teadupärast keeruline - seaduslikke e-posti aadresse ja hoste on tohutult palju ning kõiki kehtivaid märkide kombinatsioone pole võimalik ära arvata.

See tähendab, et kõigil kehtivatel e-posti aadressidel on ühised peamised tegurid:

  • Aadress peab sisaldama ühte @ ja vähemalt ühte punkti (.)
  • @ -Märk ei saa olla aadressi esimene märk
  • The. peab tulema vähemalt üks märk märgi @ järel

Seda silmas pidades kasutavad arendajad võib-olla regexi abil kindlaks, kas e-posti aadress on kehtiv või mitte. Siin on funktsioon, mida Tyler McGinnis oma blogis soovitab:

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

Viimase näite koodile lisatuna näeb see välja järgmine:

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 vormi piirangud

Mõned tavaliselt kasutatavad HTML5 piirangud on typeatribuut (nt type="password") maxlength, requiredja disabled.

Vähem kasutatav piirang on patternatribuut, mis võtab JavaScripti regulaaravaldise.

Rohkem informatsiooni

  • Vormi andmete valideerimine MDN
  • Piirangu valideerimine MDN