Sådan implementeres klient-side-formvalidering med JavaScript

Sådan implementeres klient-side-formvalidering med JavaScript

JavaScript er et af de mest populære og alsidige programmeringssprog, som du kan komme i gang med i dag. Dette programmeringssprog siges med rette at være websproget og er afgørende for at tilføje interaktivitet til dine websteder.





Formelementet er et af de mest brugte HTML -elementer på websteder. Disse formularer tager input fra brugeren og behandler det i browseren eller serveren. Det er dog vigtigt at validere disse input for at tackle sikkerhedsproblemer og uønskede fejl.



Forståelse af DOM -manipulation

Inden vi går i gang med at implementere formvalidering på klientsiden med JavaScript, er det vigtigt at forstå dokumentobjektmodellen, almindeligvis kendt som 'DOM'. DOM er en standardiseret API, der tillader JavaScript at interagere med elementer på en HTML -webside.





Lær mere: Den skjulte helt på websteder: Forståelse af DOM

For at tilføje begivenhedslyttere og hente brugerinput skal du forstå det grundlæggende i DOM -manipulation. Her er et eksempel, der forklarer, hvordan du kan ændre websidens indhold ved hjælp af DOM API og JavaScript:









Document





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

I ovenstående kode er

tag har et id på afsnit . Mens du skriver JavaScript -koden, kan du få adgang til dette element ved at ringe til document.getElementById ('afsnit') metode og manipulere dens værdi.

Nu hvor du har forstået det grundlæggende i DOM -manipulation, lad os gå videre og implementere formvalidering.



Formvalidering med JavaScript

Der er forskellige typer input, som du kan tage fra en bruger. Teksttype, e -mailtype, kodeordstype, alternativknapper og afkrydsningsfelter er nogle af de mest almindelige, du kan støde på. På grund af disse langt de fleste input -typer skal du bruge forskellige logikker til at validere hver af dem.

Inden vi går i gang med validering, lad os tage et øjeblik for at forstå HTML -formularer og deres betydning. HTML-formularer er en af ​​de primære måder, du interagerer med webstedet, da de giver dig mulighed for at indtaste dine data, anvende ændringer, påberåbe pop-ups, indsende oplysninger til en server og mere.



kan du tilføje ram til en macbook pro

HTML -koden element bruges til at oprette disse brugervendte formularer. Sådan kan du validere inputene til en HTML -formular:

1. Validering af e -mail

Uanset om du bygger et godkendelsessystem eller bare indsamler brugermails til dit nyhedsbrev, er det vigtigt at validere e -mailen, før du kan gemme den i din database eller behandle den. For at kontrollere, om en e -mail opfylder alle de krævede betingelser, kan du bruge en almindelig udtryk .

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. Validering af adgangskode

Adgangskoder er et afgørende stykke data, der har brug for en særlig type validering for at sikre dets sikkerhed. Overvej en tilmeldingsformular med to felter: adgangskode og bekræft adgangskodefelter. For at validere disse par input er her nogle ting, du skal overveje:

  • Adgangskoden skal være mere end 6 tegn lang.
  • Værdien af ​​adgangskoden og feltet Bekræft adgangskode skal være den samme.

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. Validering af radioindgang

HTML -radioindgang er en særlig type grafisk kontrolelement, der giver brugeren mulighed for kun at vælge en af ​​et foruddefineret sæt af indbyrdes eksklusive muligheder. Et almindeligt tilfælde af et sådant input ville være at vælge køn. For at validere sådan input skal du kontrollere, om mindst en af ​​dem er valgt.

Dette kan opnås ved hjælp af logiske operatører såsom AND ( && ) og ikke ( ! ) operatør på denne måde:

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. Vælg Inputvalidering

Det HTML-element bruges til at oprette en rulleliste. Det tags inde i element definer de tilgængelige muligheder i rullelisten. Hver af disse tags har en værdiattribut tilknyttet dem.

ændre baggrund for foto i photoshop

For standard- eller indledende indstilling kan du indstille dens værdi til at være en tom streng, så den betragtes som en ugyldig indstilling. For alle de andre muligheder skal du angive en passende værdiattribut. Her er et eksempel på, hvordan du kan validere a input element:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

netflix har vi problemer med at spille denne titel lige nu
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Valg af afkrydsningsfelt

Inputelementer i afkrydsningsfeltet type gengives som standard som felter, der er markeret eller markeret, når de er aktiveret. Et afkrydsningsfelt giver dig mulighed for at vælge enkelte værdier til indsendelse i en formular. Afkrydsningsfelter er et populært valg for input til 'accepter vilkår og betingelser'.

For at finde ud af, om et afkrydsningsfelt er markeret eller ej, kan du få adgang til den markerede attribut på afkrydsningsfeltets input. Her er et eksempel:

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

Forebyggelse er bedre end helbredelse

Det anbefales altid at validere alle de input, du modtager fra en besøgende for at give en sikker og sikker oplevelse. Hackere forsøger altid at indtaste ondsindede data i inputfelterne for at udføre cross-site scriptingangreb og SQL-injektioner.

Nu hvor du forstår, hvordan du validerer dine HTML -input, hvorfor ikke prøve det ved at bygge en form og implementere de strategier, du har set ovenfor?

Del Del Tweet E -mail Sådan opretter du en formular i HTML

Tillad dine brugere at indtaste data på dine websteder med HTML -formularer.

Læs Næste Relaterede emner
  • Programmering
  • HTML
  • JavaScript
  • Web-udvikling
  • Kodning Tutorials
Om forfatteren Nitin Ranganath(31 artikler udgivet)

Nitin er en ivrig softwareudvikler og en computeringeniørstuderende, der udvikler webapplikationer ved hjælp af JavaScript -teknologier. Han arbejder som freelance webudvikler og kan lide at skrive til Linux og programmering i fritiden.

Mere fra Nitin Ranganath

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere