Kako izvajati preverjanje obrazcev na strani odjemalca z JavaScript

Kako izvajati preverjanje obrazcev na strani odjemalca z JavaScript

JavaScript je eden izmed najbolj priljubljenih in vsestranskih programskih jezikov, s katerim lahko začnete danes. Za ta programski jezik velja, da je jezik spleta in je bistven za dodajanje interaktivnosti vašim spletnim mestom.





Element obrazca je eden najpogosteje uporabljenih elementov HTML na spletnih mestih. Ti obrazci vnesejo vnos od uporabnika in ga obdelajo v brskalniku ali strežniku. Vendar je pomembno potrditi te vložke za reševanje varnostnih vprašanj in neželenih napak.



Razumevanje manipulacije z DOM

Preden nadaljujemo z izvajanjem validacije obrazca na strani odjemalca z JavaScriptom, je nujno razumeti objektni model dokumenta, splošno znan kot 'DOM'. DOM je standardiziran API, ki JavaScript omogoča interakcijo z elementi na spletni strani HTML.





Več o tem: Skriti junak spletnih mest: Razumevanje DOM

Če želite dodati poslušalce dogodkov in pridobiti uporabniške vnose, morate razumeti osnove manipuliranja z DOM. Tukaj je primer, ki pojasnjuje, kako lahko spremenite vsebino spletne strani z API -jem DOM in JavaScript:









Document





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

V zgornji kodi je

oznaka ima ID odstavka . Med pisanjem kode JavaScript lahko do tega elementa dostopate tako, da pokličete document.getElementById ('odstavek') metodo in manipuliranje njene vrednosti.

Zdaj, ko ste razumeli osnove manipulacije z DOM, pojdimo naprej in izvedimo preverjanje obrazca.



Preverjanje obrazcev z JavaScript

Uporabniki lahko sprejmejo različne vrste vnosov. Vrsta besedila, vrsta e -pošte, vrsta gesla, izbirni gumbi in potrditvena polja so nekateri najpogostejši, na katere lahko naletite. Zaradi te velike večine vrst vnosov boste morali za potrditev vsakega od njih uporabiti različno logiko.

Preden se poglobimo v validacijo, si vzemimo trenutek, da razumemo oblike HTML in njihov pomen. Obrazci HTML so eden od primarnih načinov interakcije s spletnim mestom, saj vam omogočajo, da vnesete svoje podatke, uporabite spremembe, prikličete pojavna okna, posredujete podatke strežniku in drugo.



kako sinhronizirati e -pošto na androidu

HTML element se uporablja za ustvarjanje teh obrazcev, ki so namenjeni uporabnikom. Tako lahko potrdite vnose obrazca HTML:

1. Preverjanje e -pošte

Ne glede na to, ali gradite sistem za preverjanje pristnosti ali samo zbirate e -poštna sporočila uporabnikov za vaše glasilo, je pomembno, da potrdite e -poštno sporočilo, preden ga lahko shranite v bazo podatkov ali obdelate. Če želite preveriti, ali e -poštno sporočilo izpolnjuje vse zahtevane pogoje, uporabite a vsakdanje izražanje .

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. Preverjanje gesla

Gesla so ključni del podatkov, ki za zagotovitev varnosti potrebuje posebno vrsto potrditve. Razmislite o prijavnem obrazcu z dvema polji: geslo in polja za potrditev gesla. Za potrditev teh dveh vložkov morate upoštevati nekaj stvari:

  • Geslo mora biti dolgo več kot 6 znakov.
  • Vrednost gesla in polje za potrditev gesla morata biti enaka.

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. Preverjanje radijskih vhodov

Radijski vhod HTML je posebna vrsta grafičnega krmilnega elementa, ki uporabniku omogoča, da izbere le eno od vnaprej določenega nabora medsebojno izključujočih možnosti. Običajna uporaba takega vnosa bi bila izbira spola. Za potrditev takega vnosa boste morali preveriti, če je izbran vsaj eden od njih.

To je mogoče doseči z uporabo logični operaterji kot sta AND ( && ) in NE ( ! ) operater na ta 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. Izberite Preverjanje vnosa

The Element HTML se uporablja za ustvarjanje spustnega seznama. The oznake znotraj element določite razpoložljive možnosti na spustnem seznamu. Vsak od teh oznake imajo z njimi povezan atribut vrednosti.

pomotoma izbrisan koš za smeti windows 10

Za privzeto ali začetno možnost lahko nastavite njeno vrednost kot prazen niz, tako da se šteje za neveljavno možnost. Za vse druge možnosti nastavite ustrezen atribut vrednosti. Tukaj je primer, kako lahko potrdite vhodni element:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

moje amazonsko naročilo ni prispelo
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Potrditev potrditvenega polja

Vnosni elementi potrditvenega polja tipa so privzeto upodobljeni kot polja, ki so ob aktiviranju označena ali označena. Potrditveno polje omogoča izbiro posameznih vrednosti za predložitev v obrazcu. Potrditvena polja so priljubljena izbira za vnos 'sprejmi pogoje in določila'.

Če želite preveriti, ali je potrditveno polje označeno ali ne, lahko dostopate do označenega atributa na vnosu potrditvenega polja. Tukaj je primer:

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.');
}

Preprečevanje je bolje kot zdravljenje

Vedno je priporočljivo potrditi vse prispevke, ki jih prejmete od obiskovalca, da zagotovite varno in varno izkušnjo. Hekerji vedno poskušajo vnesti zlonamerne podatke v vnosna polja za izvajanje napadov na skriptnih straneh in vbrizgavanja SQL.

Zdaj, ko razumete, kako potrditi svoje vnose HTML, zakaj ne bi poskusili z oblikovanjem obrazca in izvajanjem zgoraj navedenih strategij?

Deliti Deliti Cvrkutati E-naslov Kako ustvariti obrazec v HTML

Omogočite svojim uporabnikom vnos podatkov na vaša spletna mesta z obrazci HTML.

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML
  • JavaScript
  • Spletni razvoj
  • Vadnice za kodiranje
O avtorju Nitin Ranganath(31 objavljenih člankov)

Nitin je navdušen razvijalec programske opreme in študent računalniškega inženiringa, ki razvija spletne aplikacije z uporabo tehnologij JavaScript. Dela kot samostojni spletni razvijalec in v prostem času rad piše za Linux in programiranje.

Več od Nitin Ranganath

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti