Bijv. E-mailvalidatie met JavaScript (Regex)

Vaak worden we geconfronteerd met de noodzaak om te valideren dat een e-mailadres is ingevoerd in een bepaald veld van ons formulier. geldige email. In dit artikel leren we hoe we e-mails kunnen valideren met behulp van reguliere expressies (ook bekend als regex) in JavaScript.

Wat is een reguliere expressie (regex)?

Een reguliere expressie is een reeks tekens die een zoekpatroon definieert. In dit geval willen we een patroon vinden dat een geldig e-mailadres vertegenwoordigt.

Reguliere expressies zijn een krachtige en flexibele tool voor het werken met tekenreeksen en het valideren van invoergegevens.

E-mailvalidatie met regex

Om te valideren dat een e-mail geldig is, moeten we verifiëren dat het formaat correct is, dat wil zeggen dat het een @ en een domein bevat. Hiervoor gebruiken we de volgende uitdrukking:

var reguliere expressie = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Voorbeeld van volledig formulier

In het volgende voorbeeld laten we zien hoe u een e-mailadres kunt valideren met behulp van JavaScript en een reguliere expressie. De stappen die we volgen zijn:

1. We definiëren een functie genaamd validerenMail dat neemt als argument de e-mail om te valideren.
2. We maken een variabele regex Een met de reguliere expressie om de e-mail te valideren.
3. Wij gebruiken de methode test() van de reguliere expressie om te controleren of het ingevoerde e-mailadres overeenkomt met het patroon.
4. Als de e-mail geldig is, geven we een waarschuwingsbericht weer dat aangeeft dat deze geldig is; anders geven we een waarschuwingsbericht weer dat aangeeft dat het ongeldig is.
5. In de HTML maken we een invoerveld van het type "e-mail" en een knop die, wanneer erop wordt geklikt, de functie aanroept validerenMail met de waarde die in het invoerveld is ingevoerd.

functie validatieEmail (mail) {
// Reguliere expressie om e-mail te valideren
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Controleer of de mail overeenkomt met het patroon gedefinieerd door de reguliere expressie
if (regex.test (mail)) {
alert("Geldige e-mail");
} else {
alert ("Ongeldige e-mail");
}
}

E-mailvalidatie met JavaScript en regex

Valideren

Voor- en nadelen van valideren met JavaScript

Het valideren van invoergegevens, zoals e-mailadressen, met behulp van JavaScript aan de clientzijde heeft voor- en nadelen:

Voordelen	Nadelen
Directe feedback voor de gebruiker	Is niet veilig
Minder belasting van de server	Compatibiliteit tussen verschillende browsers
Verbeter de gebruikerservaring	Dubbele inspanning (client/server-zijde)
Verkorting responstijd	Vervangt validatie aan de serverzijde niet

Het valideren van gegevens met JavaScript is geen vervanging voor server-side validatie. Het helpt echter om de belasting te verminderen. Om gegevens aan de serverzijde te valideren, raad ik u aan het volgende te lezen:

• E-mailvalidatie met PHP