Valider les numéros de téléphone en JavaScript avec des expressions régulières

Introduction

Que vous en soyez conscient ou non, les données sont devenues un élément crucial de notre vie quotidienne. De la commande de nourriture en ligne à la recherche de nourriture pour chat, nous envoyons et recevons constamment des données. En tant que développeurs d'applications Web, il est de notre responsabilité de nous assurer que les entrées des utilisateurs sont dans le format spécifié afin que la base de données comprenne correctement les données et que l'application reste robuste.

La validation du numéro de téléphone est importante car elle garantit que les données sont enregistrées dans un format cohérent dans toute la base de données. Par exemple, les utilisateurs peuvent avoir besoin de précisions pour savoir s'ils doivent saisir le code du pays avant leur numéro de téléphone. Avec une validation appropriée en place, les utilisateurs peuvent facilement déterminer si cela est nécessaire. De même, l'expérience utilisateur s'améliore avec un format cohérent, car vous savez à quoi vous attendre des utilisateurs et pouvez implémenter la logique en conséquence. Ce serait une mauvaise expérience pour les utilisateurs si le code se cassait ultérieurement en raison de données incohérentes.

Les expressions régulières sont des outils puissants pour la correspondance de modèles. Ils offrent la possibilité de faire correspondre des modèles de différents types, en fonction de votre cas d'utilisation. De plus, les expressions régulières sont indépendantes de la langue, ce qui rend votre logique de validation plus portable, car vous pouvez facilement intégrer la validation de base. Travailler avec regex en JavaScript est une tâche simple.

Cet article vous aidera à comprendre comment utiliser la puissance des expressions régulières pour valider les numéros de téléphone de votre application. Vous écrirez une fonction JavaScript simple pour valider les numéros de téléphone avec les codes de pays.

Qu'est-ce qu'une expression régulière ?

En termes simples, une expression régulière correspond à un modèle prédéfini dans une chaîne donnée. Il est largement utilisé dans les langages de programmation et principalement utilisé pour valider les entrées d'un format spécifique. De plus, les expressions régulières sont couramment utilisées pour rechercher, diviser et remplacer des modèles spécifiés.

Supposons que vous souhaitiez rechercher une adresse e-mail dans un document. L'adresse e-mail peut être n'importe quelle adresse, pas une adresse spécifique. Écrire une expression simple vous aidera à trouver rapidement le modèle puisque vous connaissez déjà la structure d'une adresse e-mail.

Une expression régulière utilise des caractères spéciaux pour désigner différents types de modèles. Par exemple:

• . (point) est un caractère spécial qui peut correspondre à n'importe quel caractère.
• * (astérisque) correspond au caractère précédent 0 fois ou plus.
• + (plus) correspond au caractère précédent une ou plusieurs fois.
• ? (point d'interrogation) rend le caractère précédent facultatif.
• [abc] correspond à l'un des caractères a, bou c.
• (abc) regroupe les personnages.
• ^ (caret) correspond au début de la ligne.
• $ (dollar) correspond à la fin de la ligne.

Ce ne sont que quelques-uns. Si vous souhaitez approfondir et en savoir plus sur les modèles, vous pouvez vous référer à ce document de Microsoft.

Construisons une expression régulière qui vérifie si un ensemble donné de nombres est un code postal à cinq chiffres. Pour commencer à écrire l'expression, nous utiliserons le ^ (caret), car il correspond au début de la ligne. Dans une expression régulière, d correspond à n'importe quel chiffre, et un nombre entre accolades ({}) correspond à l'élément précédent exactement le nombre de fois indiqué entre les accolades. De la liste ci-dessus, nous savons que $ est utilisé pour faire correspondre la fin de la ligne.

En combinant ces informations, nous obtenons une expression régulière comme celle-ci :

/^d{5}$/

Maintenant, examinons le graphique ci-dessous pour mieux comprendre l'expression.

Expression régulière pour correspondre au code postal à cinq chiffres

Maintenant que nous avons une compréhension de base des expressions régulières et de leur construction générale, c'est le bon moment pour explorer comment ces expressions peuvent être implémentées dans une fonction JavaScript.

Expressions régulières JavaScript

JavaScript est le langage de programmation le plus populaire parmi les développeurs. Étant donné que presque toutes les applications Web nécessitent JavaScript, il est crucial de comprendre comment les expressions régulières peuvent être utilisées dans ce langage.

En JavaScript, le RegExp L'objet est utilisé pour la correspondance de modèle. Cet objet peut être utilisé de deux manières :

• Utilisation de la notation littérale, où un modèle est formaté entre deux barres obliques
• En utilisant la notation constructeur, où une chaîne ou un RegExp l'objet est passé

La notation littérale peut être utilisée aussi simplement que ceci :

const expr = /^d{5}$/i;

D'un autre côté, avec la notation constructeur, vous devrez utiliser le RegExp constructeur pour en créer une instance. Voici à quoi ça ressemble :

const expr = new RegExp(/^d{5}$/, "i");

Vous pouvez en savoir plus sur l'objet RegExp à partir du documents MDN officiels. Explorons maintenant l'importance de la validation du numéro de téléphone et les différents composants d'un numéro de téléphone.

Validation du numéro de téléphone et composants

La validation des numéros de téléphone côté client est cruciale lors de l'enregistrement des numéros de téléphone dans votre base de données. Sans une validation appropriée, votre code peut présenter des comportements inattendus.

Par exemple, supposons que vous utilisez un service qui nécessite le code du pays avec le numéro de téléphone, mais que vos utilisateurs ne les incluent pas en raison d'un manque de validation. Maintenant, vous n'avez que le numéro sans le code du pays, et un service qui envoie des SMS peut échouer à cause de cela. Ce n'est qu'un scénario hypothétique. D'autres problèmes peuvent même planter votre application. Il est crucial de gérer correctement vos données dans le frontend, en veillant à enregistrer des données propres et cohérentes dans votre base de données.

Généralement, un numéro de téléphone se compose de quatre parties :

• Indicatif pays : Les 1 à 3 premiers chiffres (selon le pays) définissent le pays du numéro de téléphone. Ce code permet d'acheminer l'appel vers le bon pays. Un code pays ne peut pas commencer par un 0.

L'article que vous êtes en train d'éditer s'intitule "Valider les numéros de téléphone en JavaScript avec des expressions régulières". Le morceau de texte à modifier :

• Indicatif régional : également appelé ville ou indicatif téléphonique, cette partie du numéro permet d'acheminer l'appel vers la zone géographique appropriée dans le pays. Dans certains pays, comme les États-Unis, les indicatifs régionaux peuvent également indiquer un ensemble spécifique de numéros de téléphone pour un service particulier. De plus, en Amérique du Nord, un indicatif régional ne peut pas commencer par un 0 ou un 1.
• Préfixe téléphonique : cette séquence de numéros est attribuée à un bureau central ou à un central téléphonique spécifique par la compagnie de téléphone, ce qui réduit davantage la zone géographique ou le quartier spécifique.
• Numéro de ligne : il s'agit du numéro unique attribué à la ligne téléphonique spécifique d'un foyer ou d'une entreprise dans la zone de préfixe. Cette partie du numéro garantit généralement que chaque numéro de téléphone dans un pays, une zone et un préfixe est unique.

À l'exclusion de l'indicatif de pays, la combinaison des parties restantes donne un numéro de téléphone à dix chiffres où l'indicatif régional et le préfixe téléphonique sont à trois chiffres chacun et le numéro de ligne à quatre chiffres.

Passons maintenant à l'écriture d'une fonction JavaScript qui valide un numéro de téléphone en fonction de ces critères à l'aide d'expressions régulières.

Créer une RegEx pour la validation du numéro de téléphone

Nous avons déjà compris la structure de base d'un numéro de téléphone. Nous avons également appris les expressions régulières et comment elles peuvent être utilisées en JavaScript. Dans cette section, nous allons écrire une fonction JavaScript simple qui valide les numéros de téléphone au format donné :

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Par exemple, un numéro de téléphone valide pour notre fonction sera comme ceci +123-456-789-1234, Mais pas +012-123-456-7890 or +12-123-456-789, car ces numéros de téléphone ne respectent pas les règles des numéros de téléphone dont nous avons parlé précédemment.

Passons maintenant à l'écriture de l'expression régulière. Tout d'abord, vérifions si le code du pays est composé de 1 à 3 chiffres et ne commence pas par un zéro.

Pour indiquer le début de l'expression régulière, utilisez un caret (^), puis validez qu'un plus existe au départ. A cet effet, utilisons +, ce qui correspondra au fait que le plus existe au début. Maintenant, pour s'assurer que les chiffres du code du pays sont compris entre un et trois chiffres et que le premier chiffre n'est pas zéro, nous pouvons écrire quelque chose comme ceci : [1-9]{1}[0-9]{0,2}. Ici, [1-9]{1} spécifie que tout chiffre de 1 à 9 peut exister exactement une fois, et de même, [0-9]{0,2} indique que n'importe quel chiffre de 0 à 9 peut exister de zéro à deux fois.

Pour le séparateur, on peut ajouter un - (trait d'union) entre les sections du numéro. Un - peut être ajouté après la validation du code pays. Donc, à ce stade, la regex ressemble à ceci :

^+[1-9]{1}[0-9]{0,2}-$

Le $ à la fin spécifie la fin de la ligne. Maintenant, pour l'indicatif régional, ce sera assez similaire. Un indicatif régional ne peut pas commencer par un zéro ou un un. Ainsi, la première partie sera [2-9]{1}. Cela correspond au fait que le premier nombre est compris entre 2 et 9. Cette correspondance se produit une fois. Ensuite, pour le reste du code, on peut écrire [0-9]{2}. Cela garantira qu'il y a exactement deux chiffres après le premier, et pour chaque chiffre, la plage est comprise entre 0 et 9. Encore une fois, ajoutez le séparateur de trait d'union à la fin.

Maintenant, l'expression rationnelle complète ressemblera à ceci :

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

Utilisons à nouveau le même schéma pour vérifier le préfixe téléphonique. Supposons que le préfixe téléphonique ne peut pas non plus commencer par un zéro ou un un. Donc, en ajoutant [2-9]{1}[0-9]{2} et un tiret à nouveau rendra l'expression comme celle-ci :

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

La seule partie restante est maintenant le numéro de ligne, qui peut être n'importe quel chiffre d'une longueur d'exactement quatre. Celui-ci est plus simple que les autres. L'expression est [0-9]{4}.

L'expression complète est la suivante :

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

Vous avez dû remarquer l'utilisation fréquente des accolades. Ils sont utilisés pour faire correspondre les instances fournies à l'intérieur de l'accolade. S'il s'agit d'un chiffre spécifique, comme {1}, il correspondra au modèle précédent exactement une fois. Cependant, s'il s'agit d'une plage, comme {0, 2}, il définit le nombre minimum et maximum de correspondances. Ainsi, dans le cas de {0, 2}, il correspondra au modèle au minimum zéro fois et au maximum deux fois.

Le motif est prêt. Nous pouvons maintenant écrire une simple fonction JavaScript pour vérifier si un numéro de téléphone est valide en utilisant l'expression régulière. Voici la fonction :

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234"); 

La fonction est assez simple. Il prend un numéro de téléphone en entrée. Le modèle d'expression régulière est stocké dans une variable appelée pattern. Le modèle est instancié à l'aide du constructeur RegExp et en passant l'expression en tant que paramètre au constructeur. Ensuite, nous testons le numéro de téléphone en utilisant le test méthode disponible dans l'objet. À l'aide d'une instruction if-else, nous vérifions si le numéro de téléphone réussit le test. Si c'est le cas, nous renvoyons true et envoyons un message de console indiquant que le Phone number is valid. Sinon, il renvoie false et affiche un message de console indiquant que le numéro de téléphone n'est pas valide.

Avec cela, nous sommes prêts à partir. Maintenant, vous pouvez tester vos numéros de téléphone pour voir s'ils sont valides.

Résumé

Cet article visait à fournir un bref aperçu des expressions régulières, de leurs utilisations et de la manière dont elles peuvent être appliquées pour valider des numéros de téléphone. Nous avons également discuté des différents composants d'un numéro de téléphone et de la manière dont chaque composant peut être testé.

Avec une compréhension de base des expressions régulières, vous pouvez désormais explorer des modèles supplémentaires. Vous pouvez également utiliser des outils comme regex101 pour valider vos expressions en ligne.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Financement EVM. Interface unifiée pour la finance décentralisée. Accéder ici.
• Groupe de médias quantiques. IR/PR amplifié. Accéder ici.
• PlatoAiStream. Intelligence des données Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/