Kaip įdiegti kliento formos patvirtinimą naudojant „JavaScript“

Kaip įdiegti kliento formos patvirtinimą naudojant „JavaScript“

„JavaScript“ yra viena populiariausių ir universaliausių programavimo kalbų, kurią galite pradėti naudoti šiandien. Teisingai sakoma, kad ši programavimo kalba yra žiniatinklio kalba ir yra būtina norint pridėti interaktyvumo prie jūsų svetainių.





Formos elementas yra vienas iš dažniausiai naudojamų HTML elementų svetainėse. Šios formos įvedamos iš vartotojo ir apdorojamos naršyklėje arba serveryje. Tačiau svarbu patvirtinti šiuos duomenis, kad būtų išspręstos saugumo problemos ir nepageidaujamos klaidos.



DOM manipuliavimo supratimas

Prieš pradedant diegti kliento formos patvirtinimą naudojant „JavaScript“, būtina suprasti dokumento objekto modelį, paprastai žinomą kaip „DOM“. DOM yra standartizuota API, leidžianti „JavaScript“ sąveikauti su elementais HTML tinklalapyje.





Sužinokite daugiau: Paslėptas svetainių herojus: DOM supratimas

Norėdami pridėti įvykių klausytojų ir gauti vartotojo įvesties, turėsite suprasti DOM manipuliavimo pagrindus. Štai pavyzdys, paaiškinantis, kaip galite pakeisti tinklalapio turinį naudodami DOM API ir „JavaScript“:









Document





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

Aukščiau pateiktame kode

žyma turi ID pastraipą . Rašydami „JavaScript“ kodą, galite pasiekti šį elementą paskambinę document.getElementById ('pastraipa') metodą ir manipuliuoti jo verte.

Dabar, kai supratote DOM manipuliavimo pagrindus, pradėkime ir įgyvendinkime formos patvirtinimą.



Formos patvirtinimas naudojant „JavaScript“

Yra įvairių tipų įvestys, kurias galite pasiimti iš vartotojo. Teksto tipas, el. Pašto tipas, slaptažodžio tipas, radijo mygtukai ir žymės langeliai yra vieni iš dažniausiai pasitaikančių. Dėl šių daugumos įvesties tipų, norėdami patvirtinti kiekvieną iš jų, turėsite naudoti skirtingą logiką.

Prieš gilindamiesi į patvirtinimą, šiek tiek suprasime HTML formas ir jų svarbą. HTML formos yra vienas iš pagrindinių jūsų sąveikos su svetaine būdų, nes jos leidžia įvesti duomenis, taikyti pakeitimus, iškviesti iššokančiuosius langus, pateikti informaciją serveriui ir dar daugiau.



nešiojamojo kompiuterio baterija prijungta, o ne įkraunama

HTML elementas naudojamas šioms vartotojams skirtoms formoms kurti. Štai kaip galite patvirtinti HTML formos įvestis:

1. El. Pašto patvirtinimas

Nesvarbu, ar kuriate autentifikavimo sistemą, ar tiesiog renkate naujienlaiškio naudotojų el. Laiškus, svarbu patvirtinti el. Laišką prieš jį išsaugojant savo duomenų bazėje ar apdorojant. Norėdami patikrinti, ar el. Laiškas atitinka visas reikalaujamas sąlygas, galite naudoti a Įprasta išraiška .

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. Slaptažodžio patvirtinimas

Slaptažodžiai yra esminis duomenų elementas, kurio saugumui užtikrinti reikalingas specialus patvirtinimo tipas. Apsvarstykite registracijos formą, kurią sudaro du laukai: slaptažodis ir slaptažodžio patvirtinimo laukai. Norėdami patvirtinti šias įvesties poras, turite atsižvelgti į šiuos dalykus:

  • Slaptažodis turi būti ilgesnis nei 6 simboliai.
  • Slaptažodžio reikšmė ir patvirtinimo slaptažodžio laukas turi būti vienodi.

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. Radijo įvesties patvirtinimas

HTML radijo įvestis yra specialus grafinio valdymo elemento tipas, leidžiantis vartotojui pasirinkti tik vieną iš iš anksto nustatytų tarpusavyje nesuderinamų parinkčių. Dažnas tokio įvesties atvejis būtų lyties pasirinkimas. Norėdami patvirtinti tokią įvestį, turėsite patikrinti, ar pasirinktas bent vienas iš jų.

Tai galima pasiekti naudojant loginiai operatoriai pvz., AND ( && ) ir ne ( ! ) operatorius tokiu būdu:

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. Pasirinkite Įvesties patvirtinimas

The Išskleidžiamajam sąrašui sukurti naudojamas HTML elementas. The žymės viduje elementas apibrėžia galimas parinktis išskleidžiamajame sąraše. Kiekvienas iš šių žymos yra susietos su vertės atributu.

kaip gauti „Mac“ operacinę sistemą „Windows“

Pagal numatytąją arba pradinę parinktį galite nustatyti tuščią eilutę, kad ji būtų laikoma netinkama. Visoms kitoms parinktims nustatykite tinkamą vertės atributą. Štai pavyzdys, kaip galite patvirtinti a įvesties elementas:

HTML:


Select One
Mr
Mrs
Ms

„JavaScript“:

Kaip atsisiųsti šepetėlius į procreate
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Pažymėkite langelį Patvirtinimas

Tipo žymės langelio įvesties elementai pagal numatytuosius nustatymus pateikiami kaip langeliai, kurie įjungus yra pažymėti arba pažymėti. Žymimasis langelis leidžia pasirinkti atskiras reikšmes, pateiktas formoje. Žymimasis laukelis yra populiarus įvesties „sutikti su sąlygomis ir sąlygomis“ pasirinkimas.

Norėdami sužinoti, ar pažymėtas žymimasis langelis, ar ne, galite pasiekti pažymėto atributo žymimąjį laukelį. Štai pavyzdys:

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

Prevencija yra geriau nei gydymas

Visada rekomenduojama patvirtinti visus iš lankytojo gautus duomenis, kad būtų užtikrinta saugi patirtis. Piratai visada bando įvesti kenkėjiškus duomenis įvesties laukuose, kad atliktų scenarijų atakas keliose svetainėse ir SQL injekcijas.

Dabar, kai suprantate, kaip patvirtinti HTML įvestis, kodėl gi nepabandžius, sukuriant formą ir įgyvendinant aukščiau matytas strategijas?

Dalintis Dalintis „Tweet“ Paštu Kaip sukurti formą HTML

Leiskite vartotojams įvesti duomenis į jūsų svetaines naudodami HTML formas.

Skaityti toliau Susijusios temos
  • Programavimas
  • HTML
  • „JavaScript“
  • Interneto svetainių kūrimas
  • Kodavimo pamokos
Apie autorių Nitinas Ranganatas(Paskelbti 31 straipsniai)

Nitinas yra aistringas programinės įrangos kūrėjas ir kompiuterių inžinerijos studentas, kuriantis žiniatinklio programas naudojant „JavaScript“ technologijas. Jis dirba kaip laisvai samdomas žiniatinklio kūrėjas ir laisvalaikiu mėgsta rašyti „Linux“ ir programavimui.

Daugiau iš Nitin Ranganath

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia