Varje webbutvecklare känner till känslan: du har byggt ett formulär, och du ger ifrån dig ett stön när du inser att nu måste du validera varje fält.

Tack och lov behöver formulärvalidering inte vara smärtsamt. Du kan använda reguljära uttryck för att hantera många vanliga valideringsbehov.

Vad är reguljära uttryck?

Reguljära uttryck beskriver mönster som matchar kombinationer av tecken i strängar. Du kan använda dem för att representera begrepp som "bara siffror" eller "exakt fem versaler".

Reguljära uttryck (även kallade regex) är kraftfulla verktyg. De har många användningsområden, inklusive avancerad sökning, hitta-och-ersätt och valideringsoperationer på strängar. En berömd tillämpning av reguljära uttryck är kommandot grep i Linux.

Varför använda reguljära uttryck för validering?

Det är många sätt att validera formulärinmatning, men reguljära uttryck är enkla, snabba och bekväma att använda om du förstår hur.

JavaScript har inbyggt stöd för reguljära uttryck. Detta innebär att använda dem för validering i motsats till ett externt bibliotek hjälper till att hålla storleken på din webbapplikation så liten som möjligt.

instagram viewer

Reguljära uttryck kan också validera många typer av formulärinmatning.

Grunderna i reguljära uttryck

Reguljära uttryck består av symboler som beskriver mönster som bildas av tecken i en sträng. I JavaScript kan du skapa ett bokstavligt reguljärt uttryck genom att skriva det mellan två snedstreck framåt. Den enklaste formen av ett reguljärt uttryck ser ut så här:

/abc/

Ovanstående reguljära uttryck matchar alla strängar som innehåller tecknen "a", "b" och "c" i den ordningen, i följd. Strängen "abc" kommer att matcha det reguljära uttrycket, liksom en sträng som "abcdef".

Du kan beskriva mer avancerade mönster genom att använda specialtecken i dina reguljära uttryck. Specialtecken representerar inte en bokstavlig karaktär, men de gör ditt regex mer uttrycksfullt.

Du kan använda dem för att ange att en del av mönstret ska upprepas ett visst antal gånger, eller för att indikera att en del av mönstret är valfritt.

Ett exempel på ett specialtecken är "*". Tecknet "*" modifierar antingen ett enskilt tecken eller en grupp tecken som kommer före det. Den förklarar att dessa tecken kan vara frånvarande eller kan upprepa sig hur många gånger som helst i rad. Till exempel:

/abc*/

Kommer att matcha "ab" följt av valfritt antal "c"-tecken. Strängen "ab" är ett giltigt exempel på det mönstret, eftersom tecknet "c" är valfritt. Strängarna "abc" och "abccccc" är lika giltiga, eftersom "*" betyder att "c" kan upprepas hur många gånger som helst.

Den fullständiga regex-syntaxen använder flera fler mönstertecken för att beskriva möjliga matchningar. Du kan lära dig mer av regexlearn.coms Regex 101 interaktiv kurs. MDN: s JavaScript-guide är också mycket användbart.

Formvalidering med reguljära uttryck

Du kan använda regex för att validera formulärinmatning på ett par sätt. Det första sättet är att använda JavaScript. Det innebär några steg:

  1. Få värdet av formulärinmatningen.
  2. Kontrollera om värdet på inmatningen matchar det reguljära uttrycket.
  3. Om den inte gör det, visa för användaren av webbplatsen att värdet på inmatningsfältet är ogiltigt.

Här är ett kort exempel. Givet ett inmatningsfält så här:

<input platshållare="Inmatningsområde">

Du kan skriva en funktion för att validera den så här:

fungerabekräfta() {
låta värde = dokumentera.querySelector("ingång").värde;
konst regEx = /^.{3,7}$/;
lämna tillbaka regEx.test (värde);
}

Ett annat sätt är att dra fördel av webbläsarens HTML-formulärvalideringsmöjligheter. Hur? Genom att ange regex som värdet för mönsterattributet för HTML-inmatningstaggen.

Mönsterattributet är endast giltigt för följande typer av inmatning: text, tel, e-post, url, lösenord och sökning.

Här är ett exempel som använder attributet mönster:

<form>
<input platshållare="Inmatningsområde" obligatoriskt mönster="/^.{3,7}$/">
<knapp>Skicka in</button>
</form>

Om du skickar formuläret och indatavärdet inte matchar hela regexet, kommer formuläret att visa ett standardfel som ser ut så här:

Om det reguljära uttrycket som tillhandahålls för mönsterattributet är ogiltigt kommer webbläsaren att ignorera attributet.

Vanliga regexmönster för formulärvalidering

Att behöva konstruera och felsöka regex från början kan ta lite tid. Här är några regex-satser som du kan använda för att validera några av de vanligaste typerna av formulärdata.

Reguljärt uttryck för att validera stränglängd

Ett av de vanligaste valideringskraven är en begränsning av längden på en sträng. Det reguljära uttrycket som matchar en sträng med sju tecken är:

/^.{7}$/

"." är en platshållare som matchar alla tecken, och "7" inom parentes anger längdgränsen för strängen. Om strängen behövde vara inom ett visst längdintervall, som mellan tre och sju, skulle det reguljära uttrycket se ut så här istället:

/^.{3,7}$/

Och om strängen behövde vara minst tre tecken lång utan någon övre gräns skulle den se ut så här:

/^.{3,}$/

Det är osannolikt att längden kommer att vara det enda valideringskravet för en formulärinmatning. Men du kommer ofta att använda det som en del av ett mer komplicerat reguljärt uttryck inklusive andra villkor.

Reguljära uttryck för att validera endast bokstavsfält

Vissa formulärinmatningar behöver inte innehålla annat än bokstäver för att vara giltiga. Följande reguljära uttryck matchar bara sådana strängar:

/^[a-zA-Z]+$/

Detta reguljära uttryck anger en teckenuppsättning som består av hela alfabetet. Specialtecknet "+" betyder att det föregående tecknet måste förekomma minst en gång, utan någon övre gräns.

Reguljärt uttryck för att validera fält med endast nummer

Följande reguljära uttryck matchar bara strängar som helt består av siffror:

/^\d+$/

Ovanstående reguljära uttryck är i huvudsak detsamma som det föregående. Den enda skillnaden är att den använder ett specialtecken "\d" för att representera siffrorna, istället för att skriva ut dem.

Reguljära uttryck för att validera alfanumeriska fält

Reguljära uttryck gör det enkelt att även validera alfanumeriska fält. Här är ett reguljärt uttryck som bara matchar strängar som består av bokstäver och siffror:

/^[a-zA-Z\d]+$/

Vissa fält är alfanumeriska, men tillåter några andra tecken som bindestreck och understreck. Ett exempel på sådana fält är ett användarnamn. Nedan finns ett reguljärt uttryck som matchar en sträng som består av bokstäver, siffror, understreck och bindestreck:

/^(\w|-)+$/

Specialtecknet "\w" matchar en hel klass av tecken, som "\d" gör. Det representerar intervallet för alfabetet, siffrorna och understrecket ("_").

Reguljära uttryck för att validera telefonnummer

Ett telefonnummer kan vara ett komplicerat fält att validera eftersom olika länder använder olika format. Ett mycket allmänt tillvägagångssätt är att se till att strängen bara innehåller siffror och att dess längd ligger inom ett visst intervall:

/^\d{9,15}$/

Ett mer sofistikerat tillvägagångssätt kan se ut som det här taget från MDN, som validerar telefonnummer i formatet ###-###-####:

/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/

Reguljära uttryck för att validera datum

Precis som telefonnummer kan datum också ha flera format. Datum är vanligtvis mindre komplicerade att validera än telefonnummer. Varför? Datum innehåller inga andra tecken än siffror och bindestreck.

Här är ett exempel som validerar datum i formatet "DD-MM-ÅÅÅÅ".

/^\d{2}-\d{2}-\d{4}$/

Validering med Regex är enkelt

Reguljära uttryck beskriver mönster som matchar kombinationer av tecken i strängar. De har en mängd olika applikationer, som att validera användarinmatning från HTML-formulär.

Du kan använda regex för att validera med JavaScript eller via HTML-mönsterattributet. Det är lätt att konstruera reguljära uttryck för att validera vanliga typer av formulärinmatningar som datum och användarnamn.