Pagrindinės formos patvirtinimas „JavaScript“

Anksčiau forma buvo tikrinama serveryje, kai asmuo jau buvo įvedęs visą savo informaciją ir paspaudęs mygtuką „Pateikti“.

Jei informacija buvo neteisinga arba jos nebuvo, serveris turėtų viską išsiųsti su pranešimu, kuriame nurodoma asmeniui ištaisyti formą prieš ją vėl pateikiant.

Tai buvo ilgas procesas ir užkrautų didelę naštą serveriui.

Šiais laikais „JavaScript“ pateikia keletą būdų, kaip patvirtinti formos duomenis tiesiai naršyklėje prieš siunčiant juos į serverį.

Štai HTML kodas, kurį naudosime šiuose pavyzdžiuose:

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

Pagrindinis patvirtinimas

Šio tipo patvirtinimas apima visų privalomų laukų patikrinimą ir įsitikinimą, kad jie tinkamai užpildyti.

Štai pagrindinis funkcijos pavyzdys validate, rodantis įspėjimą, jei vartotojo vardo ir el. Pašto adreso įvestys yra tuščios, kitaip jis grąžinamas tiesu:

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

Bet kas, jei kas nors įves atsitiktinį tekstą kaip savo el. Pašto adresą? Šiuo metu validatefunkcija vis tiek bus teisinga. Kaip galite įsivaizduoti, blogų duomenų siuntimas į serverį gali sukelti problemų.

Čia yra duomenų formato patvirtinimas.

Duomenų formato patvirtinimas

Šio tipo patvirtinimas iš tikrųjų žiūri į formos reikšmes ir patikrina, ar jos teisingos.

Patvirtinti el. Pašto adresus yra žinoma sunku - yra daug teisėtų el. Pašto adresų ir pagrindinių kompiuterių, todėl neįmanoma atspėti visų galiojančių simbolių derinių.

Vis dėlto visi galiojantys el. Pašto adresai yra keli pagrindiniai veiksniai:

  • Adrese turi būti vienas @ ir bent vienas taškas (.)
  • @ Simbolis negali būti pirmasis simbolis adrese
  • The. turi būti bent vienas simbolis po @ ženklu

Turint tai omenyje, galbūt kūrėjai naudoja regex, norėdami nustatyti, ar el. Pašto adresas galioja, ar ne. Štai tokią funkciją Tyleris McGinnisas rekomenduoja savo tinklaraštyje:

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

Pridėjus kodą iš paskutinio pavyzdžio, jis atrodys taip:

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 formos apribojimai

Kai kurie iš dažniausiai naudojamų HTML5 suvaržymų yra typeatributas (pvz type="password"), maxlength, requiredir disabled.

Rečiau naudojamas apribojimas yra patternatributas, kuriam „JavaScript“ tenka įprasta išraiška.

Daugiau informacijos

  • Formos duomenų patvirtinimas MDN
  • Apribojimo patvirtinimas MDN