Hur man implementerar klientsidans formulärvalidering med JavaScript

Hur man implementerar klientsidans formulärvalidering med JavaScript

JavaScript är ett av de mest populära och mångsidiga programmeringsspråken som du kan komma igång med idag. Detta programmeringsspråk sägs med rätta vara webbspråk och är viktigt för att lägga till interaktivitet på dina webbplatser.





Formelementet är ett av de mest använda HTML -elementen på webbplatser. Dessa formulär tar in input från användaren och bearbetar det i webbläsaren eller servern. Det är dock viktigt att validera dessa ingångar för att hantera säkerhetsproblem och oönskade buggar.



Förstå DOM -manipulation

Innan vi fortsätter att implementera formulärvalidering på klientsidan med JavaScript är det viktigt att förstå dokumentobjektmodellen, allmänt känd som 'DOM'. DOM är ett standardiserat API som tillåter JavaScript att interagera med element på en HTML -webbsida.





Läs mer: Den dolda hjälten på webbplatser: Förstå DOM

För att lägga till händelselyssnare och hämta användarinmatningar måste du förstå grunderna i DOM -manipulation. Här är ett exempel som förklarar hur du kan ändra webbsidans innehåll med DOM API och JavaScript:









Document





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

I koden ovan,

taggen har ett id paragraf . När du skriver JavaScript -koden kan du komma åt det här elementet genom att ringa till document.getElementById ('stycke') metod och manipulera dess värde.

Nu när du har förstått grunderna i DOM -manipulation, låt oss gå vidare och implementera formulärvalidering.



Formvalidering med JavaScript

Det finns olika typer av ingångar som du kan ta från en användare. Texttyp, e -posttyp, lösenordstyp, alternativknappar och kryssrutor är några av de vanligaste som du kan stöta på. På grund av de allra flesta ingångstyperna måste du använda olika logik för att validera var och en av dem.

Innan vi går in på validering, låt oss ta en stund för att förstå HTML -formulär och deras betydelse. HTML-formulär är ett av de främsta sätten du interagerar med webbplatsen eftersom de tillåter dig att ange dina data, tillämpa ändringar, åberopa popup-fönster, skicka information till en server och mer.



logga ut från netflix på roku

HTML -koden element används för att skapa dessa användarvända formulär. Så här kan du validera inmatningarna i ett HTML -formulär:

1. E -postvalidering

Oavsett om du bygger ett autentiseringssystem eller bara samlar in användarmail för ditt nyhetsbrev, är det viktigt att validera e -postmeddelandet innan du kan lagra det i din databas eller bearbeta det. För att kontrollera om ett e -postmeddelande uppfyller alla nödvändiga villkor kan du använda en vanligt uttryck .

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. Verifiering av lösenord

Lösenord är en avgörande del av data som behöver en särskild typ av validering för att säkerställa dess säkerhet. Överväg ett registreringsformulär med två fält: lösenord och bekräfta lösenordsfält. För att validera dessa par ingångar, här är några saker du måste tänka på:

  • Lösenordet måste vara mer än 6 tecken långt.
  • Värdet på lösenordet och fältet för att bekräfta lösenord måste vara samma.

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 radioingång

HTML -radioingång är en speciell typ av grafiskt kontrollelement som tillåter användaren att bara välja en av en fördefinierad uppsättning ömsesidigt uteslutande alternativ. Ett vanligt användningsfall för en sådan ingång skulle vara att välja kön. För att validera sådan inmatning måste du kontrollera om minst en av dem är vald.

Detta kan uppnås med hjälp av logiska operatörer som AND ( && ) och inte ( ! ) operatör på detta sätt:

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älj Ingångsvalidering

De HTML-element används för att skapa en listruta. De taggar inuti element definiera tillgängliga alternativ i listrutan. Var och en av de här taggar har ett värdeattribut kopplat till sig.

grossistartiklar till salu i bulk

För standard- eller initialalternativet kan du ställa in dess värde som en tom sträng så att det anses som ett ogiltigt alternativ. För alla andra alternativ anger du ett lämpligt värdeattribut. Här är ett exempel på hur du kan validera en ingångselement:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

hur man hittar raderade meddelanden på messenger
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Kryssruta Validering

Inmatningselement för typkryssrutan återges som standard som rutor som är markerade eller kryssade när de är aktiverade. En kryssruta låter dig välja enskilda värden för inlämning i ett formulär. Kryssrutor är ett populärt val för ingången 'acceptera villkor'.

För att ta reda på om en kryssruta är kryssad eller inte kan du komma åt det markerade attributet på kryssrutans ingång. Här är ett exempel:

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

Att förebygga är bättre än att bota

Det rekommenderas alltid att validera alla inmatningar som du får från en besökare för att ge en trygg upplevelse. Hackare försöker alltid mata in skadlig data i inmatningsfälten för att utföra skriptattacker över flera platser och SQL-injektioner.

Nu när du förstår hur du validerar dina HTML -ingångar, varför inte prova det genom att bygga ett formulär och implementera de strategier du har sett ovan?

Dela med sig Dela med sig Tweet E-post Hur man skapar ett formulär i HTML

Låt dina användare ange data på dina webbplatser med HTML -formulär.

Läs Nästa Relaterade ämnen
  • Programmering
  • HTML
  • JavaScript
  • Webbutveckling
  • Handledning för kodning
Om författaren Nitin Ranganath(31 artiklar publicerade)

Nitin är en ivrig mjukvaruutvecklare och en datoringenjörstudent som utvecklar webbapplikationer med hjälp av JavaScript -teknik. Han arbetar som frilansande webbutvecklare och gillar att skriva för Linux och programmering på fritiden.

Mer från Nitin Ranganath

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera