Alle nettutviklere kjenner følelsen: du har laget et skjema, og du stønner når du innser at nå må du validere hvert felt.
Heldigvis trenger ikke skjemavalidering å være smertefullt. Du kan bruke regulære uttrykk til å håndtere mange vanlige valideringsbehov.
Hva er regulære uttrykk?
Regelmessige uttrykk beskriver mønstre som samsvarer med kombinasjoner av tegn i strenger. Du kan bruke dem til å representere konsepter som "bare tall" eller "nøyaktig fem store bokstaver".
Regelmessige uttrykk (også kalt regex) er kraftige verktøy. De har mange bruksområder, inkludert avansert søk, finn-og-erstatt og valideringsoperasjoner på strenger. En kjent anvendelse av regulære uttrykk er grep-kommandoen i Linux.
Hvorfor bruke regulære uttrykk for validering?
Det er mange måter å validere skjemainndata på, men regulære uttrykk er enkle, raske og praktiske å bruke hvis du forstår hvordan.
JavaScript har innebygd støtte for regulære uttrykk. Dette betyr at bruk av dem for validering i motsetning til et eksternt bibliotek bidrar til å holde størrelsen på nettapplikasjonen din så liten som mulig.
Regulære uttrykk er også i stand til å validere mange typer skjemainndata.
Grunnleggende om regulære uttrykk
Regulære uttrykk består av symboler som beskriver mønstre dannet av tegn i en streng. I JavaScript kan du lage et regulært uttrykk ved å skrive det mellom to skråstreker. Den enkleste formen for et regulært uttrykk ser slik ut:
/abc/Det regulære uttrykket ovenfor vil samsvare med enhver streng som inkluderer tegnene "a", "b" og "c" i den rekkefølgen, fortløpende. Strengen "abc" vil matche det regulære uttrykket, så vel som en streng som "abcdef".
Du kan beskrive mer avanserte mønstre ved å bruke spesialtegn i regulære uttrykk. Spesialkarakterer representerer ikke en bokstavelig karakter, men de gjør regexen din mer uttrykksfull.
Du kan bruke dem til å spesifisere at en del av mønsteret skal gjentas et visst antall ganger, eller for å indikere at noe av mønsteret er valgfritt.
Et eksempel på et spesialtegn er "*". "*"-tegnet endrer enten et enkelt tegn, eller en gruppe med tegn, som kommer foran det. Den erklærer at disse karakterene kan være fraværende eller kan gjenta seg selv et hvilket som helst antall ganger på rad. For eksempel:
/abc*/
Vil matche "ab" etterfulgt av et hvilket som helst antall "c"-tegn. Strengen "ab" er et gyldig eksempel på det mønsteret, fordi tegnet "c" er valgfritt. Strengene "abc" og "abccccc" er like gyldige, fordi "*" betyr at "c" kan gjentas et hvilket som helst antall ganger.
Den fullstendige regex-syntaksen bruker flere flere mønstertegn for å beskrive mulige treff. Du kan lære mer av regexlearn.coms Regex 101 interaktivt kurs. MDNs JavaScript-guide er også veldig nyttig.
Skjemavalidering med regulære uttrykk
Du kan bruke regulært uttrykk for å validere skjemainndata på et par måter. Den første måten er å bruke JavaScript. Det innebærer noen få trinn:
- Få verdien av skjemainndata.
- Sjekk om verdien til input samsvarer med det regulære uttrykket.
- Hvis den ikke gjør det, vis til brukeren av nettstedet at verdien til inndatafeltet er ugyldig.
Her er et kort eksempel. Gitt et inndatafelt som dette:
<input plassholder="Inndatafelt">Du kan skrive en funksjon for å validere den slik:
funksjonvalidere() {
la verdi = dokument.querySelector("input").verdi;
konst regEx = /^.{3,7}$/;
komme tilbake regEx.test (verdi);
}En annen måte er å dra nytte av nettleserens HTML-skjemavalideringsmuligheter. Hvordan? Ved å spesifisere regulært uttrykk som verdien av mønsterattributtet til HTML-inndatakoden.
Mønsterattributtet er kun gyldig for følgende typer inndata: tekst, tel, e-post, url, passord og søk.
Her er et eksempel som bruker mønsterattributtet:
<form>
<input plassholder="Inndatafelt" nødvendig mønster="/^.{3,7}$/">
<knapp>Sende inn</button>
</form>Hvis du sender inn skjemaet og inndataverdien ikke samsvarer med hele regulære uttrykk, vil skjemaet vise en standardfeil som ser slik ut:
Hvis det regulære uttrykket som leveres til mønsterattributtet er ugyldig, vil nettleseren ignorere attributtet.
Vanlige regex-mønstre for skjemavalidering
Å måtte konstruere og feilsøke regex fra bunnen av kan ta litt tid. Her er noen regex-setninger som du kan bruke til å validere noen av de vanligste typene skjemadata.
Regelmessig uttrykk for å validere strenglengde
Et av de vanligste valideringskravene er en begrensning på lengden på en streng. Det regulære uttrykket som vil matche en syv-tegns streng er:
/^.{7}$/"." er en plassholder som samsvarer med et hvilket som helst tegn, og "7" i krøllede parenteser spesifiserer lengdegrensen for strengen. Hvis strengen måtte være innenfor et visst lengdeområde, som mellom tre og syv, ville det regulære uttrykket se slik ut i stedet:
/^.{3,7}$/Og hvis strengen trengte å være minst tre tegn lang uten øvre grense, ville den se slik ut:
/^.{3,}$/Det er usannsynlig at lengden vil være det eneste valideringskravet for en skjemainndata. Men du vil ofte bruke det som en del av et mer komplisert regulært uttrykk, inkludert andre forhold.
Regelmessige uttrykk for å validere felt som kun er bokstaver
Noen skjemainndata må ikke inneholde annet enn bokstaver for å være gyldige. Følgende regulære uttrykk vil bare samsvare med slike strenger:
/^[a-zA-Z]+$/Dette regulære uttrykket spesifiserer et tegnsett som består av hele alfabetet. Spesialtegnet "+" betyr at det foregående tegnet må forekomme minst én gang, uten øvre grense.
Regulært uttrykk for å validere felt med kun nummer
Følgende regulære uttrykk vil bare samsvare med strenger som utelukkende består av sifre:
/^\d+$/Det regulære uttrykket ovenfor er i hovedsak det samme som det forrige. Den eneste forskjellen er at den bruker et spesialtegn "\d" for å representere rekkevidden av sifre, i stedet for å skrive dem ut.
Regelmessig uttrykk for å validere alfanumeriske felt
Regelmessige uttrykk gjør det også enkelt å validere alfanumeriske felt. Her er et regulært uttrykk som bare samsvarer med strenger som består av bokstaver og sifre:
/^[a-zA-Z\d]+$/Noen felt er alfanumeriske, men tillater noen få andre tegn som bindestrek og understrek. Et eksempel på slike felt er et brukernavn. Nedenfor er et regulært uttrykk som samsvarer med en streng som består av bokstaver, sifre, understreker og bindestreker:
/^(\w|-)+$/Spesialtegnet "\w" samsvarer med en hel klasse med tegn, slik "\d" gjør. Det representerer rekkevidden til alfabetet, sifrene og understrekingstegnet ("_").
Regelmessig uttrykk for å validere telefonnumre
Et telefonnummer kan være et komplisert felt å validere fordi forskjellige land bruker forskjellige formater. En veldig generell tilnærming er å sikre at strengen bare inneholder sifre og at lengden er innenfor et visst område:
/^\d{9,15}$/En mer sofistikert tilnærming kan se ut som denne tatt fra MDN, som validerer telefonnumre i formatet ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regelmessig uttrykk for å validere datoer
I likhet med telefonnumre kan datoer også ha flere formater. Datoer er vanligvis mindre kompliserte å validere enn telefonnumre. Hvorfor? Datoer inneholder ingen andre tegn enn sifre og bindestreker.
Her er et eksempel som vil validere datoer i formatet "DD-MM-ÅÅÅÅ".
/^\d{2}-\d{2}-\d{4}$/Det er enkelt å validere med regulært uttrykk
Regelmessige uttrykk beskriver mønstre som samsvarer med kombinasjoner av tegn i strenger. De har en rekke applikasjoner, for eksempel validering av brukerinndata fra HTML-skjemaer.
Du kan bruke regulært uttrykk for å validere med JavaScript eller via HTML-mønsterattributtet. Det er enkelt å konstruere regulære uttrykk for å validere vanlige typer skjemainndata som datoer og brukernavn.
