Home-theater-designers
JavaScript er et av de mest populære og allsidige programmeringsspråkene du kan komme i gang med i dag. Dette programmeringsspråket sies med rette å være språket på nettet og er avgjørende for å legge til interaktivitet på nettstedene dine.
Skjemaelementet er et av de mest brukte HTML -elementene på nettsteder. Disse skjemaene tar innspill fra brukeren og behandler det i nettleseren eller serveren. Det er imidlertid viktig å validere disse inngangene for å håndtere sikkerhetsproblemer og uønskede feil.
Forstå DOM -manipulasjon
Før vi fortsetter å implementere skjemavalidering på klientsiden med JavaScript, er det viktig å forstå dokumentobjektmodellen, vanligvis kjent som 'DOM'. DOM er et standardisert API som lar JavaScript samhandle med elementer på en HTML -webside.
Lær mer: Den skjulte helten på nettsteder: Forstå DOM
For å legge til hendelseslyttere og hente brukerinnganger, må du forstå det grunnleggende om DOM -manipulering. Her er et eksempel som forklarer hvordan du kan endre nettsidens innhold ved hjelp av DOM API og JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
I koden ovenfor er
Nå som du har forstått det grunnleggende om DOM -manipulering, la oss gå videre og implementere skjemavalidering.
Skjemavalidering med JavaScript
Det er forskjellige typer innganger du kan ta fra en bruker. Teksttype, e -posttype, passordtype, alternativknapper og avmerkingsbokser er noen av de vanligste du kan støte på. På grunn av de aller fleste inndatatypene, må du bruke forskjellig logikk for å validere hver av dem.
Før vi går inn i validering, la oss ta et øyeblikk for å forstå HTML -skjemaer og deres betydning. HTML-skjemaer er en av de viktigste måtene du kommuniserer med nettstedet på, ettersom de lar deg legge inn dataene dine, bruke endringer, påberope popup-vinduer, sende informasjon til en server og mer.
hvorfor er diskbruken på 100
HTML -koden element brukes til å lage disse brukervendte skjemaene. Slik kan du validere inngangene til et HTML -skjema:
1. Validering av e -post
Enten du bygger et autentiseringssystem eller bare samler bruker -e -post til nyhetsbrevet ditt, er det viktig å validere e -posten før du kan lagre den i databasen eller behandle den. For å sjekke om en e -post oppfyller alle nødvendige betingelser, kan du bruke en vanlig uttrykk .
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 av passord
Passord er en viktig del av dataene som trenger en spesiell type validering for å sikre sikkerheten. Vurder et registreringsskjema som har to felt: passord og bekreft passordfelt. For å validere disse to inngangene, er det noen ting du må vurdere:
- Passordet må inneholde mer enn 6 tegn.
- Verdien på passordet og feltet Bekreft passord må 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 av radioinngang
HTML -radioinngang er en spesiell type grafisk kontrollelement som lar brukeren bare velge ett av et forhåndsdefinert sett med gjensidig utelukkende alternativer. Et vanlig brukstilfelle for et slikt innspill vil være å velge kjønn. For å validere slik inngang må du sjekke om minst en av dem er valgt.
Dette kan oppnås ved å bruke logiske operatører for eksempel AND ( && ) og ikke ( ! ) operatør på denne måten:
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. Velg Inndatavalidering
De HTML-element brukes til å lage en rullegardinliste. De tagger inne i element definere de tilgjengelige alternativene i rullegardinlisten. Hver av disse tagger har et verdiattributt knyttet til seg.
hva betyr rng i spill
For standard- eller innledende alternativ kan du angi at verdien skal være en tom streng, slik at den blir ansett som et ugyldig alternativ. For alle de andre alternativene, angi et passende verdiattributt. Her er et eksempel på hvordan du kan validere a inngangselement:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
dating nettsteder for 18 åringer
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Avmerkingsboks Validering
Inndataelementer i avmerkingsboksen for type gjengis som standard som bokser som er merket eller merket av når de er aktivert. En avmerkingsboks lar deg velge enkeltverdier for innsending i et skjema. Avmerkingsbokser er et populært valg for innspillingen 'godta vilkår og betingelser'.
For å finne ut om en avkrysningsboks er merket eller ikke, kan du få tilgang til det merkede attributtet på innspillingsboksen. Her er et eksempel:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Det er bedre å forebygge enn å helbrede
Det anbefales alltid å validere alle innspillene du mottar fra en besøkende for å gi en trygg opplevelse. Hackere prøver alltid å legge inn ondsinnede data i inndatafeltene for å utføre skriptangrep på tvers av nettsteder og SQL-injeksjoner.
Nå som du forstår hvordan du validerer HTML -inngangene dine, hvorfor ikke prøve det ved å bygge et skjema og implementere strategiene du har sett ovenfor?
Dele Dele kvitring E -post Hvordan lage et skjema i HTMLLa brukerne dine legge inn data på nettstedene dine med HTML -skjemaer.
Les neste Relaterte temaer- Programmering
- HTML
- JavaScript
- Webutvikling
- Opplæringsprogrammer for koding
Nitin er en ivrig programvareutvikler og en dataingeniørstudent som utvikler webapplikasjoner ved hjelp av JavaScript -teknologier. Han jobber som frilans webutvikler og liker å skrive for Linux og programmering på fritiden.
Mer fra Nitin RanganathAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere