Elke webontwikkelaar kent het gevoel: je hebt een formulier gebouwd en je kreunt terwijl je je realiseert dat je nu elk veld moet valideren.

Gelukkig hoeft formuliervalidatie niet pijnlijk te zijn. U kunt reguliere expressies gebruiken om aan veel algemene validatiebehoeften te voldoen.

Wat zijn reguliere expressies?

Reguliere expressies beschrijven patronen die overeenkomen met combinaties van tekens in strings. U kunt ze gebruiken om begrippen als "alleen cijfers" of "precies vijf hoofdletters" weer te geven.

Reguliere expressies (ook wel regex genoemd) zijn krachtige hulpmiddelen. Ze hebben veel toepassingen, waaronder geavanceerd zoeken, zoeken en vervangen en validatiebewerkingen op tekenreeksen. Een bekende toepassing van reguliere expressies is het grep-commando in Linux.

Waarom reguliere expressies gebruiken voor validatie?

Er zijn veel manieren om formulierinvoer te valideren, maar reguliere expressies zijn eenvoudig, snel en handig in gebruik als je begrijpt hoe.

JavaScript heeft native ondersteuning voor reguliere expressies. Dit betekent dat het gebruik ervan voor validatie, in tegenstelling tot een externe bibliotheek, helpt om de grootte van uw webtoepassing zo klein mogelijk te houden.

instagram viewer

Reguliere expressies zijn ook in staat om vele soorten formulierinvoer te valideren.

Basisprincipes van reguliere expressies

Reguliere expressies bestaan ​​uit symbolen die patronen beschrijven die worden gevormd door tekens in een string. In JavaScript kunt u een letterlijke reguliere expressie maken door deze tussen twee schuine strepen te schrijven. De eenvoudigste vorm van een reguliere expressie ziet er als volgt uit:

/abc/

De bovenstaande reguliere expressie komt overeen met elke tekenreeks die achtereenvolgens de tekens "a", "b" en "c" bevat. De tekenreeks "abc" komt overeen met die reguliere expressie, evenals een tekenreeks zoals "abcdef".

U kunt meer geavanceerde patronen beschrijven door speciale tekens in uw reguliere expressies te gebruiken. Speciale tekens vertegenwoordigen geen letterlijk teken, maar ze maken uw regex expressiever.

U kunt ze gebruiken om aan te geven dat een deel van het patroon een bepaald aantal keren moet worden herhaald, of om aan te geven dat een deel van het patroon optioneel is.

Een voorbeeld van een speciaal teken is "*". Het "*"-teken wijzigt een enkel teken of een groep tekens die ervoor staan. Het verklaart dat die karakters afwezig kunnen zijn of zich een aantal keren achter elkaar kunnen herhalen. Bijvoorbeeld:

/abc*/

Komt overeen met "ab" gevolgd door een willekeurig aantal "c"-tekens. De tekenreeks "ab" is een geldig voorbeeld van dat patroon, omdat het teken "c" optioneel is. De strings "abc" en "abccccc" zijn even geldig, omdat de "*" betekent dat "c" een willekeurig aantal keren kan worden herhaald.

De volledige regex-syntaxis gebruikt nog een aantal patroontekens om mogelijke overeenkomsten te beschrijven. U kunt meer leren van Regex 101. van regexlearn.com interactieve cursus. JavaScript-gids van MDN is ook erg handig.

Formuliervalidatie met reguliere expressies

U kunt regex gebruiken om formulierinvoer op een aantal manieren te valideren. De eerste manier is om JavaScript te gebruiken. Het omvat een paar stappen:

  1. Haal de waarde van de formulierinvoer op.
  2. Controleer of de waarde van de invoer overeenkomt met de reguliere expressie.
  3. Als dit niet het geval is, laat dan aan de gebruiker van de website zien dat de waarde van het invoerveld ongeldig is.

Hier is een kort voorbeeld. Gegeven een invoerveld als dit:

<invoer tijdelijke aanduiding="Invoer veld">

U kunt een functie schrijven om deze als volgt te valideren:

functievalideren() {
laten waarde = document.querySelector ("invoer").waarde;
const regEx = /^.{3,7}$/;
opbrengst regEx.test (waarde);
}

Een andere manier is om te profiteren van de HTML-formuliervalidatiemogelijkheden van de browser. Hoe? Door regex op te geven als de waarde van het patroonkenmerk van de HTML-invoertag.

Het patroonkenmerk is alleen geldig voor de volgende typen invoer: tekst, tel, e-mail, url, wachtwoord en zoeken.

Hier is een voorbeeld waarin het patroonkenmerk wordt gebruikt:

<het formulier>
<invoer tijdelijke aanduiding="Invoer veld" vereist patroon="/^.{3,7}$/">
<knop>Indienen</button>
</form>

Als u het formulier verzendt en de waarde van de invoer komt niet overeen met de volledige regex, geeft het formulier een standaardfout weer die er als volgt uitziet:

Als de reguliere expressie die aan het patroonkenmerk wordt geleverd ongeldig is, negeert de browser het kenmerk.

Gemeenschappelijke Regex-patronen voor formuliervalidatie

Het kan enige tijd duren om een ​​regex helemaal opnieuw te bouwen en te debuggen. Hier zijn enkele regex-instructies die u kunt gebruiken om enkele van de meest voorkomende soorten formuliergegevens te valideren.

Reguliere expressie om stringlengte te valideren

Een van de meest voorkomende validatievereisten is een beperking van de lengte van een string. De reguliere expressie die overeenkomt met een tekenreeks van zeven tekens is:

/^.{7}$/

De "." is een tijdelijke aanduiding die overeenkomt met elk teken, en de "7" tussen accolades geeft de lengtelimiet van de tekenreeks aan. Als de string binnen een bepaald lengtebereik moest zijn, zoals tussen drie en zeven, zou de reguliere expressie er in plaats daarvan als volgt uitzien:

/^.{3,7}$/

En als de tekenreeks minimaal drie tekens lang moet zijn zonder bovengrens, ziet deze er als volgt uit:

/^.{3,}$/

Het is onwaarschijnlijk dat lengte de enige validatievereiste is voor een formulierinvoer. Maar je zult het vaak gebruiken als onderdeel van een meer gecompliceerde reguliere expressie, inclusief andere voorwaarden.

Reguliere expressie om velden met alleen letters te valideren

Sommige formulierinvoer hoeft alleen maar letters te bevatten om geldig te zijn. De volgende reguliere expressie komt alleen overeen met dergelijke tekenreeksen:

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

Deze reguliere expressie specificeert een tekenset die bestaat uit het hele alfabet. Het speciale teken "+" betekent dat het voorgaande teken minimaal één keer moet voorkomen, zonder bovengrens.

Reguliere expressie om velden met alleen getallen te valideren

De volgende reguliere expressie komt alleen overeen met tekenreeksen die volledig uit cijfers bestaan:

/^\d+$/

De bovenstaande reguliere expressie is in wezen hetzelfde als de vorige. Het enige verschil is dat het een speciaal teken "\d" gebruikt om het bereik van cijfers weer te geven, in plaats van ze weg te schrijven.

Reguliere expressie om alfanumerieke velden te valideren

Reguliere expressies maken het ook gemakkelijk om alfanumerieke velden te valideren. Hier is een reguliere expressie die alleen overeenkomt met tekenreeksen die uit letters en cijfers bestaan:

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

Sommige velden zijn alfanumeriek, maar laten een paar andere tekens toe, zoals koppeltekens en onderstrepingstekens. Een voorbeeld van dergelijke velden is een gebruikersnaam. Hieronder staat een reguliere expressie die overeenkomt met een tekenreeks die bestaat uit letters, cijfers, onderstrepingstekens en koppeltekens:

/^(\w|-)+$/

Het speciale teken "\w" komt overeen met een hele klasse tekens, zoals "\d". Het vertegenwoordigt het bereik van het alfabet, de cijfers en het onderstrepingsteken ("_").

Reguliere expressie om telefoonnummers te valideren

Een telefoonnummer kan een ingewikkeld veld zijn om te valideren, omdat verschillende landen verschillende formaten gebruiken. Een zeer algemene benadering is om ervoor te zorgen dat de string alleen cijfers bevat en dat de lengte binnen een bepaald bereik ligt:

/^\d{9,15}$/

Een meer verfijnde benadering zou eruit kunnen zien als deze van: MDN, die telefoonnummers valideert in de indeling ###-###-####:

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

Reguliere expressie om datums te valideren

Net als telefoonnummers kunnen datums ook meerdere indelingen hebben. Datums zijn meestal minder ingewikkeld om te valideren dan telefoonnummers. Waarom? Datums bevatten geen andere tekens dan cijfers en koppeltekens.

Hier is een voorbeeld dat datums valideert in de notatie "DD-MM-YYYY".

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

Valideren met Regex is eenvoudig

Reguliere expressies beschrijven patronen die overeenkomen met combinaties van tekens in strings. Ze hebben verschillende toepassingen, zoals het valideren van gebruikersinvoer van HTML-formulieren.

U kunt regex gebruiken om te valideren met JavaScript of via het HTML-patroonkenmerk. Het is eenvoudig om reguliere expressies te maken om veelvoorkomende typen formulierinvoer zoals datums en gebruikersnamen te valideren.