Kako implementirati provjeru valjanosti obrazaca na strani klijenta pomoću JavaScripta

Kako implementirati provjeru valjanosti obrazaca na strani klijenta pomoću JavaScripta

JavaScript je jedan od najpopularnijih i najraznovrsnijih programskih jezika s kojima danas možete započeti. Za ovaj programski jezik s pravom se kaže da je jezik weba i bitan je za dodavanje interaktivnosti vašim web stranicama.





Element obrasca jedan je od najčešće korištenih HTML elemenata na web stranicama. Ovi obrasci uzimaju unos od korisnika i obrađuju ga u pregledniku ili poslužitelju. Međutim, važno je potvrditi ove unose radi rješavanja sigurnosnih problema i neželjenih grešaka.



Razumijevanje DOM manipulacije

Prije nego što nastavimo s implementacijom provjere valjanosti obrazaca na strani klijenta s JavaScriptom, važno je razumjeti objektni model dokumenta, općenito poznat kao 'DOM'. DOM je standardizirani API koji omogućuje interakciju JavaScripta s elementima na HTML web stranici.





Saznajte više: Skriveni heroj web stranica: Razumijevanje DOM -a

Za dodavanje slušatelja događaja i preuzimanje korisničkih unosa morat ćete razumjeti osnove manipulacije DOM -om. Evo primjera koji objašnjava kako možete promijeniti sadržaj web stranice pomoću DOM API -ja i JavaScripta:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

U gornjem kodu,

oznaka ima id stavak . Tijekom pisanja JavaScript koda ovom elementu možete pristupiti pozivom na document.getElementById ('odlomak') metodu i manipuliranje njezinom vrijednošću.

Sada kada ste razumjeli osnove manipulacije DOM -om, idemo naprijed i implementirajmo provjeru valjanosti obrasca.



Provjera obrazaca pomoću JavaScripta

Postoje različite vrste unosa koje možete uzeti od korisnika. Vrsta teksta, vrsta e -pošte, vrsta lozinke, radio gumbi i potvrdni okviri neki su od najčešćih na koje možete naići. Zbog ove velike vrste unosa, morat ćete koristiti različitu logiku za provjeru svake od njih.

Prije nego što se upustimo u provjeru valjanosti, odvojimo trenutak kako bismo razumjeli HTML oblike i njihovu važnost. HTML obrasci jedan su od primarnih načina interakcije s web lokacijom jer vam omogućuju unos vaših podataka, primjenu promjena, pozivanje skočnih prozora, slanje podataka poslužitelju itd.



kako premjestiti programe s hdda na ssd

HTML element koristi se za stvaranje ovih obrazaca okrenutih prema korisniku. Evo kako možete potvrditi unose HTML obrasca:

1. Validacija e -pošte

Bez obzira gradite li sustav za provjeru autentičnosti ili samo prikupljate e -poštu korisnika za svoj bilten, važno je provjeriti valjanost e -pošte prije nego što je spremite u bazu podataka ili obradite. Da biste provjerili zadovoljava li e -pošta sve potrebne uvjete, možete upotrijebiti regularni izraz .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Provjera lozinke

Zaporke su ključni podatak koji treba posebnu vrstu provjere kako bi se osigurala njegova sigurnost. Obrazac za prijavu ima dva polja: lozinku i polja za potvrdu lozinke. Da biste potvrdili ove par ulaza, evo nekoliko stvari koje morate uzeti u obzir:

  • Lozinka mora imati više od 6 znakova.
  • Vrijednost lozinke i polje za potvrdu lozinke moraju biti iste.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Provjera radijskog ulaza

HTML radio ulaz posebna je vrsta grafičkog upravljačkog elementa koji omogućuje korisniku odabir samo jedne od unaprijed definiranih skupova međusobno isključujućih opcija. Uobičajena upotreba takvog unosa bila bi za odabir spola. Da biste potvrdili takav unos, morat ćete provjeriti je li odabran barem jedan od njih.

To se može postići korištenjem logički operatori kao što je AND ( && ) i NE ( ! ) operator na ovaj način:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Odaberite Provjera ulaza

The HTML element koristi se za stvaranje padajućeg popisa. The oznake unutar element definiraju dostupne opcije na padajućem popisu. Svaki od ovih oznake imaju atribut vrijednosti povezan s njima.

kako provjeriti je li tvrdi disk u kvaru windows 10

Za zadanu ili početnu opciju možete postaviti njezinu vrijednost kao prazan niz tako da će se smatrati nevažećom opcijom. Za sve ostale opcije postavite odgovarajući atribut vrijednosti. Evo primjera kako možete potvrditi a ulazni element:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

kako spojiti bluetooth slušalice na xbox one bez adaptera
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Potvrda potvrdnog okvira

Ulazni elementi potvrdnog okvira tipa generiraju se prema zadanim postavkama kao okviri koji su označeni ili označeni kada su aktivirani. Potvrdni okvir omogućuje odabir pojedinačnih vrijednosti za podnošenje u obrascu. Potvrdni okviri popularan su izbor za unos 'prihvati uvjete i odredbe'.

Da biste saznali je li potvrdan okvir označen ili ne, možete pristupiti označenom atributu na unosu potvrdnog okvira. Evo primjera:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Bolje spriječiti nego liječiti

Uvijek se preporučuje potvrditi sve unose koje primite od posjetitelja kako biste osigurali sigurno i zaštićeno iskustvo. Hakeri uvijek pokušavaju unijeti zlonamjerne podatke u polja za unos radi izvođenja napada skriptiranja na različitim web lokacijama i SQL injekcija.

Sada kada razumijete kako provjeriti valjanost HTML unosa, zašto ne biste pokušali izgraditi obrazac i implementirati gore navedene strategije?

Udio Udio Cvrkut E -pošta Kako stvoriti obrazac u HTML -u

Dopustite svojim korisnicima unos podataka na vaše web stranice pomoću HTML obrazaca.

Pročitajte Dalje Povezane teme
  • Programiranje
  • HTML
  • JavaScript
  • Web razvoj
  • Vodiči za kodiranje
O autoru Nitin Ranganath(Objavljen 31 članak)

Nitin je strastveni programer softvera i student računalnog inženjerstva koji razvija web aplikacije koristeći JavaScript tehnologije. Radi kao slobodni web programer, a u slobodno vrijeme voli pisati za Linux i programiranje.

Više od Nitina Ranganatha

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu