Regex pour la validation de formulaires web — patterns prêts à l'emploi
La validation côté client avec des expressions régulières est une première ligne de défense contre les saisies incorrectes avant la soumission de formulaire. Emails malformés, numéros de téléphone invalides, mots de passe trop faibles — ces erreurs peuvent être détectées et signalées à l'utilisateur immédiatement, avant même d'atteindre votre serveur. Le Testeur de Regex de WikiPlus vous permet de tester et affiner ces patterns de validation sur des données réelles avant de les intégrer dans votre code JavaScript.
Pattern de validation d'email
La validation d'email par regex est un sujet qui fait l'objet d'interminables débats car la spécification RFC 5321 est extrêmement permissive. Pour une validation côté client pratique, le pattern `^[^\s@]+@[^\s@]+\.[^\s@]{2,}$` offre un bon équilibre entre rigueur et flexibilité : il rejette les chaînes sans `@`, celles sans domaine et celles sans extension, tout en acceptant les adresses avec sous-domaines, tirets et plus. Pour une validation plus stricte, `^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$` refuse les caractères spéciaux non standard. Testez toujours votre pattern avec des cas limites : adresses avec tags `+`, domaines internationaux, extensions en `.academy` ou `.io`, et adresses sur des sous-domaines comme `user@mail.company.com`.
Validation des numéros de téléphone
Les numéros de téléphone sont extrêmement variables selon les pays, ce qui rend la validation regex difficile. Pour les numéros français, le pattern `^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.\-]*\d{2}){4}$` accepte les formats avec indicatif international (+33 ou 0033), avec ou sans espaces, points ou tirets entre les groupes. Pour une validation internationale générique, `^\+?[1-9]\d{6,14}$` accepte tout numéro de 7 à 15 chiffres avec un signe plus optionnel, couvrant la plupart des formats E.164. Testez ces patterns avec les formats que vos utilisateurs sont susceptibles d'entrer : `06 12 34 56 78`, `+33612345678`, `0612345678`, `06-12-34-56-78`.
Validation des mots de passe
La validation des mots de passe par regex permet d'imposer des règles de complexité. Pour exiger au moins 8 caractères, une majuscule, une minuscule, un chiffre et un caractère spécial, combinez plusieurs lookaheads : `^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$`. Chaque lookahead vérifie la présence d'une catégorie de caractère sans consommer de position dans la chaîne. Le quantificateur final `{8,}` impose la longueur minimale. Testez ce pattern avec des mots de passe valides et invalides pour confirmer que chaque règle fonctionne correctement. Une bonne pratique est de tester également `Aa1!` (trop court) et `aaaaaaaa` (pas de majuscule) pour vérifier les rejets corrects.
Validation des URLs et codes postaux
Pour les URLs, `^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$` valide les URLs HTTP et HTTPS avec ou sans www, avec des chemins, paramètres et ancres optionnels. Pour les codes postaux français (5 chiffres), `^(?:0[1-9]|[1-8]\d|9[0-5])\d{3}$` valide les codes de 01000 à 95999, excluant les codes invalides commençant par 00. Pour les codes postaux génériques de 5 chiffres, `^\d{5}$` suffit. Testez avec des codes valides comme `75001` et invalides comme `00100` ou `99999` pour confirmer les comportements aux limites.
Questions fréquemment posées
- La validation regex côté client est-elle suffisante pour la sécurité ?
- Non. La validation côté client améliore l'expérience utilisateur en fournissant un retour immédiat, mais elle ne remplace pas la validation côté serveur. Un utilisateur malveillant peut désactiver JavaScript ou envoyer des requêtes directement à votre API. Validez toujours les données des deux côtés.
- Comment empêcher une regex de validation de geler le navigateur ?
- Le backtracking catastrophique est le principal risque. Pour les patterns de validation, évitez les quantificateurs imbriqués comme `(a+)+`. Testez vos patterns dans WikiPlus avec des chaînes longues intentionnellement invalides pour vérifier qu'ils rejettent rapidement sans bloquer le thread. Le timeout de 1 000 ms du testeur vous alertera si un pattern est problématique.
- Puis-je utiliser les patterns testés dans WikiPlus directement en JavaScript ?
- Oui. Le testeur utilise le moteur RegExp natif de JavaScript, identique à celui de Node.js et des navigateurs modernes. Copiez le pattern et les flags depuis le testeur, construisez un objet `RegExp` ou utilisez une regex littérale dans votre code, et le comportement sera identique.