Phenquestions
Formvalidering är den grundläggande och viktigaste delen av webbutvecklingsprocessen. Vanligtvis görs formulärvalidering på serversidan. Formvalidering hjälper till att visa felmeddelanden till användaren om det finns onödiga eller felaktiga uppgifter eller om ett obligatoriskt fält lämnas tomt. Om servern hittar något fel, kastar det tillbaka det felet; sedan visar vi felmeddelandet till användaren. Men vi kan använda javascript i front-end för att validera formulärdata och visa fel direkt. I den här artikeln lär vi oss den grundläggande formulärvalideringen i javascript. Så, låt oss gå direkt till exemplen och se hur vi kan göra det i javascript.
Exempel
Först och främst antar vi ett formulär med namnet "testForm", där vi har ett inmatningsfält med etiketten "Användarnamn" och en inmatningstyp skickas in i vår HTML-fil. I formuläretiketten har vi skapat en onsubmit-händelse där vi stänger och returnerar en funktion validateFunc ().
I skriptfilen kommer vi att skriva funktionsdefinitionen av validateFunc (), som kommer att köras varje gång när användaren trycker på skicka-knappen. I den funktionen validerar vi inmatningsfältet för användarnamn. Vi antar att vi vill validera antingen användarnamnsfältet är tomt eller inte när användaren trycker på knappen Skicka.
Så för att validera användarnamnfältet. Vi tilldelar först en variabel till dokumentet.testForm, bara för att ge koden ett rent och förståeligt utseende. Sedan, i funktionsdefinitionen, skriver vi koden för validering. Vi skriver ett if-uttalande för att kontrollera det tomma formulärfältet. Om användarnamnsfältet är tomt visar vi en varningsruta för att visa felet, fokuserar på användarnamnsfältet igen och returnerar falskt så att formuläret inte skickas in. Annars, om det passerar kontrollen och data blir validerade, kommer vi att återvända till funktionen.
var theForm = dokument.testForm;// Formvalideringskod
funktionsvalideringFunc ()
if (theForm.namn.värde == "")
varning ("namnet är tomt");
formuläret.namn.fokus();
returnera falsk;
returnera (sant);
Efter att ha skrivit all den här koden. Om vi kör koden och klickar på knappen Skicka utan att skriva något i formulärfältet.
Som du kan se i skärmdumpen som bifogas nedan, kastar det ett fel i varningsrutan.
Detta är ett mycket grundläggande men ändå bra exempel för att komma igång med att implementera formulärvalideringen. För vidare implementering, som flera formulärvalideringar eller om du också vill kontrollera karaktärslängden.
För det ändamålet antar vi först två formulärfält i formuläretiketten med etiketten "e-post" och "lösenord" i vår HTML-fil.
För validering i javascript sätter vi igen ett if-uttalande för validering av e-post- och lösenordsformulärfält i funktionsdefinitionen för skriptfilen. Antag att vi vill använda flera valideringar i e-postfältet, eftersom fältet inte ska vara tomt och dess längd inte får vara mindre än 10 tecken. Så vi kan använda ELLER “||” i if-uttalandet. Om något av dessa fel inträffar kommer det att visas en varningsruta med felmeddelandet som vi vill visa, fokusera på e-postformulärfältet och returnera falskt till funktionen. På samma sätt, om vi vill tillämpa teckenlängdskontrollen i lösenordsfältet kan vi göra det.
var theForm = dokument.testForm;// Formvalideringskod
funktionsvalideringFunc ()
if (theForm.namn.värde == "")
varning ("namnet är tomt");
formuläret.namn.fokus();
returnera falsk;
if (theForm.e-post.värde == "" || formuläret.e-post.värde.längd < 10)
varning ("E-post är olämpligt");
formuläret.e-post.fokus();
returnera falsk;
if (theForm.Lösenord.värde.längd < 6)
varning ("Lösenordet måste innehålla 6 tecken");
formuläret.Lösenord.fokus();
returnera falsk;
returnera (sant);
När du har skrivit all den här koden laddar du om sidan för att ha uppdaterad kod. Nu lämnar vi antingen ett tomt e-postfält eller skriver ett e-postmeddelande med mindre än tio tecken. I båda fallen visas felmeddelandet "E-post är olämpligt".
Så detta är hur vi kan tillämpa grundläggande formulärvalidering i JavaScript. Vi kan också tillämpa datavalidering på klientsidan med hjälp av Regex eller genom att skriva vår egen anpassade funktion. Antag att vi vill tillämpa datavalidering i e-postfältet. Regex skulle vara så här för att validera ett e-postmeddelande.
if (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [e-postskyddad] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.test (theForm.e-post.värde))
varning ("E-post är olämpligt");
formuläret.e-post.fokus ();
returnera falsk;
Detta var bara en grundläggande demonstration av datavalidering med regex. Men himlen är öppen för dig att flyga.
Slutsats
Den här artikeln täcker validering av grundformulär i javascript. Vi har också försökt att smyga in i datavalideringen med regex. Om du vill lära dig mer om regex har vi en dedikerad artikel relaterad till regex på linuxhint.com. För att lära dig och förstå javascript-koncept och mer användbart innehåll som detta, fortsätt besöka linuxhint.com. Tack!
