Formuliervalidatie aan de clientzijde implementeren met JavaScript

Formuliervalidatie aan de clientzijde implementeren met JavaScript

JavaScript is een van de meest populaire en veelzijdige programmeertalen waarmee u vandaag aan de slag kunt. Deze programmeertaal wordt terecht de taal van het web genoemd en is essentieel voor het toevoegen van interactiviteit aan uw websites.





Het formulierelement is een van de meest gebruikte HTML-elementen op websites. Deze formulieren nemen input van de gebruiker en verwerken deze in de browser of server. Het is echter belangrijk om deze invoer te valideren om beveiligingsproblemen en ongewenste bugs aan te pakken.



DOM-manipulatie begrijpen

Voordat we verder gaan met het implementeren van formuliervalidatie aan de clientzijde met JavaScript, is het essentieel om het Document Object Model, algemeen bekend als de 'DOM', te begrijpen. De DOM is een gestandaardiseerde API waarmee JavaScript kan communiceren met elementen op een HTML-webpagina.





Meer informatie: De verborgen held van websites: de DOM begrijpen

Voor het toevoegen van gebeurtenislisteners en het ophalen van gebruikersinvoer, moet u de basisprincipes van DOM-manipulatie begrijpen. Hier is een voorbeeld waarin wordt uitgelegd hoe u de inhoud van de webpagina kunt wijzigen met behulp van de DOM API en JavaScript:









Document





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

In de bovenstaande code, de

tag heeft een id van paragraaf . Tijdens het schrijven van de JavaScript-code hebt u toegang tot dit element door de . aan te roepen document.getElementById('paragraaf') methode en het manipuleren van de waarde ervan.

Nu u de basisprincipes van DOM-manipulatie hebt begrepen, gaan we verder en gaan we formuliervalidatie implementeren.



Formuliervalidatie met JavaScript

Er zijn verschillende soorten invoer die u van een gebruiker kunt krijgen. Teksttype, e-mailtype, wachtwoordtype, keuzerondjes en selectievakjes zijn enkele van de meest voorkomende die u kunt tegenkomen. Vanwege deze overgrote meerderheid van invoertypen, moet u verschillende logica gebruiken om elk van hen te valideren.

Laten we, voordat we ingaan op validatie, even de tijd nemen om HTML-formulieren en hun belang te begrijpen. HTML-formulieren zijn een van de belangrijkste manieren waarop u met de website communiceert, omdat u hiermee uw gegevens kunt invoeren, wijzigingen kunt toepassen, pop-ups kunt oproepen, informatie naar een server kunt verzenden en meer.



hoe een psd-bestand te openen

de HTML element wordt gebruikt om deze gebruikersgerichte formulieren te maken. Zo kunt u de invoer van een HTML-formulier valideren:

1. E-mailvalidatie

Of u nu een authenticatiesysteem bouwt of alleen e-mails van gebruikers verzamelt voor uw nieuwsbrief, het is belangrijk om de e-mail te valideren voordat u deze in uw database kunt opslaan of verwerken. Om te controleren of een e-mail aan alle vereiste voorwaarden voldoet, kun je a reguliere expressie .

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. Wachtwoordvalidatie

Wachtwoorden zijn een cruciaal gegeven dat een speciaal type validatie nodig heeft om de veiligheid te garanderen. Overweeg een aanmeldingsformulier met twee velden: wachtwoord- en bevestigingswachtwoordvelden. Om deze invoer te valideren, zijn hier enkele dingen waar u rekening mee moet houden:

  • Het wachtwoord moet meer dan 6 tekens lang zijn.
  • De waarde van het wachtwoord en het veld wachtwoord bevestigen moeten hetzelfde zijn.

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. Radio-ingangsvalidatie

HTML-radio-invoer is een speciaal type grafisch besturingselement waarmee de gebruiker slechts één van een vooraf gedefinieerde set van elkaar uitsluitende opties kan kiezen. Een veelvoorkomend gebruik van een dergelijke invoer zou zijn voor het selecteren van geslacht. Om dergelijke invoer te valideren, moet u controleren of er ten minste één is geselecteerd.

Dit kan worden bereikt met behulp van de logische operatoren zoals de EN ( && ) en niet ( ! ) operator op deze manier:

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. Selecteer Invoervalidatie

De HTML-element wordt gebruikt om een ​​vervolgkeuzelijst te maken. De tags in de element definieert de beschikbare opties in de vervolgkeuzelijst. Elk van deze tags hebben een waardeattribuut dat eraan is gekoppeld.

hoe afbeeldingen van een pdf op te slaan

Voor de standaard- of initiële optie kunt u de waarde instellen op een lege tekenreeks, zodat deze als een ongeldige optie wordt beschouwd. Stel voor alle andere opties een geschikt waardekenmerk in. Hier is een voorbeeld van hoe u een kunt valideren invoerelement:

HTML:


Select One
Mr
Mrs
Ms

javascript:

hoe apparaten te hacken die op mijn wifi zijn aangesloten
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Selectievakje Validatie

Invoerelementen van het type selectievakje worden standaard weergegeven als vakjes die zijn aangevinkt of aangevinkt wanneer ze zijn geactiveerd. Met een selectievakje kunt u afzonderlijke waarden selecteren voor indiening in een formulier. Selectievakjes zijn een populaire keuze voor de invoer 'Accepteer algemene voorwaarden'.

Om erachter te komen of een selectievakje is aangevinkt of niet, kunt u toegang krijgen tot het aangevinkte attribuut op de invoer van het selectievakje. Hier is een voorbeeld:

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

Voorkomen is beter dan genezen

Het wordt altijd aanbevolen om alle invoer die u van een bezoeker ontvangt te valideren om een ​​veilige ervaring te bieden. Hackers proberen altijd kwaadaardige gegevens in de invoervelden in te voeren om cross-site scripting-aanvallen en SQL-injecties uit te voeren.

Nu u begrijpt hoe u uw HTML-invoer kunt valideren, waarom zou u het dan niet eens proberen door een formulier te maken en de strategieën te implementeren die u hierboven hebt gezien?

Deel Deel Tweeten E-mail Een formulier maken in HTML

Laat uw gebruikers gegevens invoeren op uw websites met HTML-formulieren.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • HTML
  • JavaScript
  • Webontwikkeling
  • Codeerhandleidingen
Over de auteur Nitin Ranganath(31 artikelen gepubliceerd)

Nitin is een enthousiaste softwareontwikkelaar en een student computertechniek die webapplicaties ontwikkelt met behulp van JavaScript-technologieën. Hij werkt als freelance webontwikkelaar en schrijft in zijn vrije tijd graag voor Linux en Programmeren.

Meer van Nitin Ranganath

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren