Nyheter i Android, Telefoner, Prylar Och Recensioner

Hur man implementerar formulärvalidering på klientsidan 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 webbens språ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 input från användaren och bearbetar det i webbläsaren eller servern. Det är dock viktigt att validera dessa indata 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.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="paragraph"></p>
</body>
<script>
const paragraph = document.getElementById('parapgraph');
paragraph.innerText="This is a paragraph tag";
</script>
</html>

I ovanstående kod,

taggen har ett id för paragraf. När du skriver JavaScript-koden kan du komma åt detta element genom att anropa document.getElementById(‘paragraph’) 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.

Formulärvalidering med JavaScript

Det finns olika typer av input 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 dessa stora flertalet indatatyper kommer du att behöva använda olika logik för att validera var och en av dem.

Relaterad  Hur man spelar kanalspel på Discord (inklusive schack och poker)

Innan vi går in i 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 primära sätten du interagerar med webbplatsen eftersom de låter dig ange dina data, tillämpa ändringar, anropa popup-fönster, skicka information till en server och mer.

HTML

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ändarnas e-postmeddelanden till 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 villkor som krävs kan du använda ett reguljärt uttryck.

HTML:

<input type="email" placeholder="[email protected]" id="email" required />

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Lösenordsvalidering

Lösenord är en viktig del av data som behöver en speciell typ av validering för att säkerställa dess säkerhet. Överväg att ett registreringsformulär har två fält: lösenord och bekräfta lösenord. För att validera dessa indatapar, 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 bekräftelse av lösenord måste vara samma.

HTML:

<input type="password" placeholder="Enter your password" id="password" required />
<input type="password" placeholder="Enter your password" id="confirm-password" required />

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. Radioingångsvalidering

HTML-radioingång är en speciell typ av grafiskt kontrollelement som låter användaren välja endast ett av en fördefinierad uppsättning alternativ som utesluter varandra. 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.

Relaterad  Så här spelar du bra video med vilken kamera som helst. Till och med en leksakskamera

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

HTML:

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="others">Others</label>
<input type="radio" id="others" name="gender" value="others" />

JavaScript:

const genders = document.getElementsByName("gender");
const validForm = false;
let i = 0;
while (!validForm && i < radios.length) {
if (radios[i].checked) validForm = true;
i++; 
}
if (!validForm) alert("Must check some option!");

4. Välj Indatavalidering

De HTML-element används för att skapa en rullgardinslista. De taggar inuti element definiera de tillgängliga alternativen i rullgardinsmenyn. Var och en av de här taggar har ett värdeattribut kopplat till dem.

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

HTML:

<select id="title" required>
<option value="">Select One</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>

JavaScript:

const title = document.getElementById('title');
if (title.value = "") {
alert('Please select a title');
}

5. Kryssruta Validering

Inmatningselement av typen kryssruta återges som standard som rutor som markeras eller markeras när de aktiveras. 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 “acceptera villkoren”.

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

HTML:

<input type="checkbox" id="terms">
<label for="terms">I agree to the terms and conditions</label>

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 indata som du får från en besökare för att ge en säker och säker upplevelse. Hackare försöker alltid lägga in skadlig data i inmatningsfälten för att utföra cross-site scripting attacker och SQL-injektioner.

Relaterad  Hur du ökar dina remarketingannonskonverteringar i fem steg

Nu när du förstår hur du validerar dina HTML-indata, varför inte prova det genom att skapa ett formulär och implementera strategierna du har sett ovan?

Om författaren

Nitin Ranganath (39 artiklar publicerade)

Nitin är en ivrig mjukvaruutvecklare och en datoringenjörsstudent som utvecklar webbapplikationer med JavaScript-teknik. Han arbetar som frilansande webbutvecklare och gillar att skriva för Linux och programmering i sin free tid.

Mer från Nitin Ranganath

Prenumerera på vårt nyhetsbrev

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

Klicka här för att prenumerera

Rekommenderad: