Chaque développeur Web connaît ce sentiment: vous avez créé un formulaire et vous poussez un gémissement en réalisant que vous devez maintenant valider chaque champ.
Heureusement, la validation du formulaire ne doit pas être pénible. Vous pouvez utiliser des expressions régulières pour gérer de nombreux besoins de validation courants.
Que sont les expressions régulières ?
Les expressions régulières décrivent des modèles qui correspondent à des combinaisons de caractères dans des chaînes. Vous pouvez les utiliser pour représenter des concepts tels que "seulement des chiffres" ou "exactement cinq lettres majuscules".
Les expressions régulières (également appelées regex) sont des outils puissants. Ils ont de nombreuses utilisations, notamment des opérations de recherche avancée, de recherche et de remplacement et de validation sur des chaînes. Une application célèbre des expressions régulières est la commande grep sous Linux.
Pourquoi utiliser des expressions régulières pour la validation ?
Il y a beaucoup de
façons de valider la saisie d'un formulaire, mais les expressions régulières sont simples, rapides et pratiques à utiliser si vous comprenez comment.JavaScript a un support natif pour les expressions régulières. Cela signifie que les utiliser pour la validation par opposition à une bibliothèque externe permet de maintenir la taille de votre application Web aussi petite que possible.
Les expressions régulières sont également capables de valider de nombreux types d'entrées de formulaire.
Principes de base des expressions régulières
Les expressions régulières sont constituées de symboles qui décrivent des modèles formés par des caractères dans une chaîne. En JavaScript, vous pouvez créer un littéral d'expression régulière en l'écrivant entre deux barres obliques. La forme la plus simple d'une expression régulière ressemble à ceci :
/abc/L'expression régulière ci-dessus correspondra à toute chaîne qui comprend les caractères "a", "b" et "c" dans cet ordre, consécutivement. La chaîne "abc" correspondra à cette expression régulière, ainsi qu'à une chaîne comme "abcdef".
Vous pouvez décrire des modèles plus avancés en utilisant des caractères spéciaux dans vos expressions régulières. Les caractères spéciaux ne représentent pas un caractère littéral, mais ils rendent votre regex plus expressive.
Vous pouvez les utiliser pour spécifier qu'une partie du motif doit se répéter un certain nombre de fois ou pour indiquer qu'une partie du motif est facultative.
Un exemple de caractère spécial est "*". Le caractère "*" modifie soit un seul caractère, soit un groupe de caractères qui le précèdent. Il déclare que ces caractères peuvent être absents ou peuvent se répéter un certain nombre de fois de suite. Par exemple:
/abc*/
Correspondra à "ab" suivi de n'importe quel nombre de caractères "c". La chaîne "ab" est un exemple valide de ce modèle, car le caractère "c" est facultatif. Les chaînes "abc" et "abccccc" sont également valides, car le "*" signifie que "c" peut se répéter n'importe quel nombre de fois.
La syntaxe regex complète utilise plusieurs autres caractères de modèle pour décrire les correspondances possibles. Vous pouvez en savoir plus sur Regex 101 de regexlearn.com cours interactif. Guide JavaScript de MDN est également très utile.
Validation de formulaire avec des expressions régulières
Vous pouvez utiliser regex pour valider l'entrée du formulaire de plusieurs manières. La première consiste à utiliser JavaScript. Cela implique quelques étapes :
- Obtenez la valeur de l'entrée du formulaire.
- Vérifiez si la valeur de l'entrée correspond à l'expression régulière.
- Si ce n'est pas le cas, indiquez à l'utilisateur du site Web que la valeur du champ de saisie est invalide.
Voici un court exemple. Étant donné un champ de saisie comme celui-ci :
<espace réservé d'entrée ="Champ de saisie">Vous pouvez écrire une fonction pour la valider comme ceci :
fonctionvalider() {
laisser valeur = document.querySelector("entrée").value;
constante regEx = /^.{3,7}$/;
revenir regEx.test (valeur);
}Une autre façon consiste à tirer parti des capacités de validation de formulaire HTML du navigateur. Comment? En spécifiant regex comme valeur de l'attribut pattern de la balise d'entrée HTML.
L'attribut pattern n'est valide que pour les types d'entrée suivants: text, tel, email, url, password et search.
Voici un exemple utilisant l'attribut pattern :
<formulaire>
<espace réservé d'entrée ="Champ de saisie" motif requis ="/^.{3,7}$/">
<bouton>Soumettre</button>
</form>Si vous soumettez le formulaire et que la valeur de l'entrée ne correspond pas à l'intégralité de la regex, le formulaire affichera une erreur par défaut qui ressemble à ceci :
Si l'expression régulière fournie à l'attribut pattern n'est pas valide, le navigateur ignorera l'attribut.
Modèles d'expression régulière courants pour la validation de formulaire
Devoir construire et déboguer des regex à partir de zéro peut prendre un certain temps. Voici quelques instructions regex que vous pouvez utiliser pour valider certains des types de données de formulaire les plus courants.
Expression régulière pour valider la longueur de la chaîne
L'une des exigences de validation les plus courantes est la restriction de la longueur d'une chaîne. L'expression régulière qui correspondra à une chaîne de sept caractères est :
/^.{7}$/La "." est un espace réservé qui correspond à n'importe quel caractère, et le "7" entre accolades spécifie la limite de longueur de la chaîne. Si la chaîne devait être comprise dans une certaine plage de longueur, comme entre trois et sept, l'expression régulière ressemblerait plutôt à ceci :
/^.{3,7}$/Et si la chaîne devait comporter au moins trois caractères sans limite supérieure, elle ressemblerait à ceci :
/^.{3,}$/Il est peu probable que la longueur soit la seule exigence de validation pour une entrée de formulaire. Mais vous l'utiliserez souvent dans le cadre d'une expression régulière plus compliquée incluant d'autres conditions.
Expression régulière pour valider les champs contenant uniquement des lettres
Certaines entrées de formulaire ne doivent contenir que des lettres pour être valides. L'expression régulière suivante ne correspondra qu'à ces chaînes :
/^[a-zA-Z]+$/Cette expression régulière spécifie un jeu de caractères composé de tout l'alphabet. Le caractère spécial "+" signifie que le caractère précédent doit apparaître au moins une fois, sans limite supérieure.
Expression régulière pour valider les champs numériques uniquement
L'expression régulière suivante ne correspondra qu'aux chaînes entièrement composées de chiffres :
/^\d+$/L'expression régulière ci-dessus est essentiellement la même que la précédente. La seule différence est qu'il utilise un caractère spécial "\d" pour représenter la plage de chiffres, au lieu de les écrire.
Expression régulière pour valider les champs alphanumériques
Les expressions régulières facilitent également la validation des champs alphanumériques. Voici une expression régulière qui ne correspondra qu'aux chaînes composées de lettres et de chiffres :
/^[a-zA-Z\d]+$/Certains champs sont alphanumériques, mais autorisent quelques autres caractères comme les traits d'union et les traits de soulignement. Un exemple de tels champs est un nom d'utilisateur. Vous trouverez ci-dessous une expression régulière qui correspond à une chaîne composée de lettres, de chiffres, de traits de soulignement et de traits d'union :
/^(\w|-)+$/Le caractère spécial "\w" correspond à une classe entière de caractères, comme le fait "\d". Il représente la plage de l'alphabet, des chiffres et du caractère de soulignement ("_").
Expression régulière pour valider les numéros de téléphone
Un numéro de téléphone peut être un champ compliqué à valider car différents pays utilisent des formats différents. Une approche très générale consiste à s'assurer que la chaîne ne contient que des chiffres et que sa longueur se situe dans une certaine plage :
/^\d{9,15}$/Une approche plus sophistiquée pourrait ressembler à celle-ci tirée de MDN, qui valide les numéros de téléphone au format ###-###-#### :
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Expression régulière pour valider les dates
Comme les numéros de téléphone, les dates peuvent également avoir plusieurs formats. Les dates sont généralement moins compliquées à valider que les numéros de téléphone. Pourquoi? Les dates ne contiennent aucun caractère autre que des chiffres et des tirets.
Voici un exemple qui validera les dates au format "JJ-MM-AAAA".
/^\d{2}-\d{2}-\d{4}$/Valider avec Regex est facile
Les expressions régulières décrivent des modèles qui correspondent à des combinaisons de caractères dans des chaînes. Ils ont une variété d'applications, telles que la validation des entrées utilisateur à partir de formulaires HTML.
Vous pouvez utiliser regex pour valider avec JavaScript ou via l'attribut de modèle HTML. Il est facile de créer des expressions régulières pour valider les types courants d'entrées de formulaire comme les dates et les noms d'utilisateur.
