Enhver webudvikler kender følelsen: du har bygget en formular, og du giver et støn, mens du indser, at nu skal du validere hvert felt.
Heldigvis behøver formularvalidering ikke at være smertefuldt. Du kan bruge regulære udtryk til at håndtere mange almindelige valideringsbehov.
Hvad er regulære udtryk?
Regulære udtryk beskriver mønstre, der matcher kombinationer af tegn i strenge. Du kan bruge dem til at repræsentere begreber som "kun tal" eller "præcis fem store bogstaver".
Regulære udtryk (også kaldet regex) er kraftfulde værktøjer. De har mange anvendelsesmuligheder, herunder avanceret søgning, find-og-erstat og valideringsoperationer på strenge. En berømt anvendelse af regulære udtryk er grep-kommandoen i Linux.
Hvorfor bruge regulære udtryk til validering?
Der er mange måder at validere formularinput på, men regulære udtryk er enkle, hurtige og praktiske at bruge, hvis du forstår hvordan.
JavaScript har indbygget understøttelse af regulære udtryk. Det betyder, at brug af dem til validering i modsætning til et eksternt bibliotek hjælper med at holde størrelsen på din webapplikation så lille som muligt.
Regulære udtryk er også i stand til at validere mange typer formularinput.
Grundlæggende om regulære udtryk
Regulære udtryk består af symboler, der beskriver mønstre dannet af tegn i en streng. I JavaScript kan du oprette et regulært udtryk ved at skrive det mellem to skråstreger. Den enkleste form for et regulært udtryk ser sådan ud:
/abc/Ovenstående regulære udtryk vil matche enhver streng, der indeholder tegnene "a", "b" og "c" i den rækkefølge, fortløbende. Strengen "abc" vil matche det regulære udtryk, såvel som en streng som "abcdef".
Du kan beskrive mere avancerede mønstre ved at bruge specialtegn i dine regulære udtryk. Specialtegn repræsenterer ikke en bogstavelig karakter, men de gør dit regex mere udtryksfuldt.
Du kan bruge dem til at angive, at en del af mønsteret skal gentages et vist antal gange, eller til at angive, at noget af mønsteret er valgfrit.
Et eksempel på et specialtegn er "*". Tegnet "*" ændrer enten et enkelt tegn eller en gruppe af tegn, der kommer før det. Det erklærer, at disse tegn kan være fraværende eller kan gentage sig selv et vilkårligt antal gange i træk. For eksempel:
/abc*/
Vil matche "ab" efterfulgt af et vilkårligt antal "c"-tegn. Strengen "ab" er et gyldigt eksempel på det mønster, fordi tegnet "c" er valgfrit. Strengene "abc" og "abccccc" er lige gyldige, fordi "*" betyder, at "c" kan gentage et vilkårligt antal gange.
Den fulde regex-syntaks bruger flere flere mønstertegn til at beskrive mulige matches. Du kan lære mere af regexlearn.com's Regex 101 interaktivt kursus. MDNs JavaScript-guide er også meget nyttig.
Formularvalidering med regulære udtryk
Du kan bruge regex til at validere formularinput på et par måder. Den første måde er at bruge JavaScript. Det involverer et par trin:
- Få værdien af formularens input.
- Tjek, om værdien af input matcher det regulære udtryk.
- Hvis det ikke gør det, skal du vise brugeren af webstedet, at værdien af inputfeltet er ugyldig.
Her er et kort eksempel. Givet et inputfelt som dette:
<input pladsholder="Indtastningsfelt">Du kan skrive en funktion for at validere den sådan her:
fungerevalidere() {
lade værdi = dokument.querySelector("input").værdi;
konst regEx = /^.{3,7}$/;
Vend tilbage regEx.test (værdi);
}En anden måde er at drage fordel af browserens HTML-formularvalideringsfunktioner. Hvordan? Ved at angive regex som værdien af mønsterattributten for HTML-input-tagget.
Mønsterattributten er kun gyldig for følgende typer input: tekst, tlf., e-mail, url, adgangskode og søgning.
Her er et eksempel, der bruger mønsterattributten:
<form>
<input pladsholder="Indtastningsfelt" påkrævet mønster="/^.{3,7}$/">
<knap>Indsend</button>
</form>Hvis du indsender formularen, og inputværdien ikke matcher hele regex, vil formularen vise en standardfejl, der ser sådan ud:
Hvis det regulære udtryk, der leveres til mønsterattributten, er ugyldigt, ignorerer browseren attributten.
Fælles regex-mønstre til formularvalidering
Det kan tage noget tid at skulle konstruere og fejlfinde regex fra bunden. Her er nogle regex-sætninger, som du kan bruge til at validere nogle af de mest almindelige typer formulardata.
Regulært udtryk for at validere strenglængde
Et af de mest almindelige valideringskrav er en begrænsning af længden af en streng. Det regulære udtryk, der matcher en syv-tegns streng er:
/^.{7}$/Det "." er en pladsholder, der matcher ethvert tegn, og "7" i krøllede parenteser angiver længdegrænsen for strengen. Hvis strengen skulle være inden for et bestemt længdeområde, f.eks. mellem tre og syv, ville det regulære udtryk se sådan ud i stedet:
/^.{3,7}$/Og hvis strengen skulle være mindst tre tegn lang uden øvre grænse, ville den se sådan ud:
/^.{3,}$/Det er usandsynligt, at længde vil være det eneste valideringskrav for en formularindtastning. Men du vil ofte bruge det som en del af et mere kompliceret regulært udtryk, herunder andre forhold.
Regulært udtryk for at validere felter med kun bogstaver
Nogle formularinput skal kun indeholde bogstaver for at være gyldige. Følgende regulære udtryk vil kun matche sådanne strenge:
/^[a-zA-Z]+$/Dette regulære udtryk angiver et tegnsæt, der består af hele alfabetet. Specialtegnet "+" betyder, at det foregående tegn skal forekomme mindst én gang uden øvre grænse.
Regulært udtryk for at validere felter med kun nummer
Følgende regulære udtryk matcher kun strenge, der udelukkende består af cifre:
/^\d+$/Ovenstående regulære udtryk er i det væsentlige det samme som det foregående. Den eneste forskel er, at den bruger et specialtegn "\d" til at repræsentere rækken af cifre, i stedet for at skrive dem ud.
Regulært udtryk for at validere alfanumeriske felter
Regulære udtryk gør det også nemt at validere alfanumeriske felter. Her er et regulært udtryk, der kun matcher strenge bestående af bogstaver og cifre:
/^[a-zA-Z\d]+$/Nogle felter er alfanumeriske, men tillader nogle få andre tegn som bindestreger og understregninger. Et eksempel på sådanne felter er et brugernavn. Nedenfor er et regulært udtryk, der matcher en streng bestående af bogstaver, cifre, understregninger og bindestreger:
/^(\w|-)+$/Specialtegnet "\w" matcher en hel klasse af tegn, ligesom "\d" gør. Det repræsenterer rækkevidden af alfabetet, cifrene og understregningstegnet ("_").
Regelmæssige udtryk for at validere telefonnumre
Et telefonnummer kan være et kompliceret felt at validere, fordi forskellige lande bruger forskellige formater. En meget generel tilgang er at sikre, at strengen kun indeholder cifre, og at dens længde er inden for et bestemt område:
/^\d{9,15}$/En mere sofistikeret tilgang kan se ud som denne taget fra MDN, som validerer telefonnumre i formatet ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regelmæssigt udtryk for at validere datoer
Ligesom telefonnumre kan datoer også have flere formater. Datoer er normalt mindre komplicerede at validere end telefonnumre. Hvorfor? Datoer indeholder ingen andre tegn end cifre og bindestreger.
Her er et eksempel, der vil validere datoer i formatet "DD-MM-ÅÅÅÅ".
/^\d{2}-\d{2}-\d{4}$/Validering med Regex er nemt
Regulære udtryk beskriver mønstre, der matcher kombinationer af tegn i strenge. De har en række applikationer, såsom validering af brugerinput fra HTML-formularer.
Du kan bruge regex til at validere med JavaScript eller via HTML-mønsterattributten. Det er nemt at konstruere regulære udtryk for at validere almindelige typer formularinput som datoer og brugernavne.
