Alaplap-hitelesítés a JavaScript-ben

A múltban az űrlapellenőrzés a szerveren történt, miután egy személy már megadta az összes adatot és megnyomta az elküldés gombot.

Ha az információ helytelen vagy hiányzik, akkor a szervernek mindent vissza kell küldenie egy üzenettel, amelyben azt kéri a személytől, hogy javítsa ki az űrlapot, mielőtt újból elküldené.

Ez hosszú folyamat volt, és nagy terhet róna a szerverre.

Manapság a JavaScript számos módon igazolja az űrlap adatait közvetlenül a böngészőben, mielőtt elküldené őket a szerverre.

Itt található a következő kódokban használt HTML-kód:

  Form Validation  // Form validation will go here     
    

     

      

       
Username
       

      
      

       
Email Address
       

      
      

       

       

      
     
    

Alapvető érvényesítés

Ez a fajta érvényesítés magában foglalja az összes kötelező mező ellenőrzését és annak megfelelő kitöltését.

Itt van egy alapvető példa egy olyan funkcióra validate, amely riasztást mutat, ha a felhasználónév és az e-mail cím üresen van, különben igaz értéket ad vissza:

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

De mi van akkor, ha valaki véletlenszerű szövegben írja be az e-mail címét? Jelenleg a validatefüggvény továbbra is igaz lesz. Ahogy el lehet képzelni, a rossz adatok szerverre történő elküldése problémákhoz vezethet.

Itt jön be az adatformátum érvényesítése.

Adatformátum érvényesítése

Ez a típusú ellenőrzés valóban megvizsgálja az űrlap értékeit és ellenőrzi, hogy helyesek-e.

Az e-mail címek ellenőrzése köztudottan nehéz - rengeteg törvényes e-mail cím és gazdagép létezik, és lehetetlen kitalálni az összes érvényes karakterkombinációt.

Ennek ellenére van néhány kulcsfontosságú tényező, amely minden érvényes e-mail címen közös:

• A címnek tartalmaznia kell egy @ karaktert és legalább egy pontot (.)
• A @ karakter nem lehet az első karakter a címben
• A . legalább egy karakterrel kell rendelkeznie a @ karakter után

Ezt szem előtt tartva talán a fejlesztők a regex segítségével állapítják meg, hogy egy e-mail cím érvényes-e vagy sem. Itt van egy funkció, amelyet Tyler McGinnis blogjában ajánl:

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

Az utolsó példa kódjához hozzáadva így fog kinézni:

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 /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } submitBtn.addEventListener('click', validate); 

HTML5 űrlap korlátozások

Néhány gyakran használt HTML5-kényszer az typeattribútum (pl. type="password") maxlength, requiredÉs disabled.

Ritkábban használt kényszer az patternattribútum, amely egy JavaScript rendszeres kifejezést vesz fel.

Több információ

• Űrlap adatainak érvényesítése | MDN
• A kényszer érvényesítése MDN