Travailler avec les numéros de téléphone en JavaScript

Lorsque vous collectez des données auprès des utilisateurs, il y a deux défis clés; collectionner ces informations et les valider. Certains types d'informations sont simples - l'âge de quelqu'un, par exemple, ne pourrait pas vraiment être plus simple à collecter et à valider. Les noms ne sont pas aussi simples qu'ils le paraissent, mais vous avez permis de répondre aux cas de bord et aux variations internationales - par exemple la patronyme, le mononyme ou même simplement les personnes ayant des noms de famille avec traits - vous ne pouvez pas vous tromper trop loin (bien que de nombreuses applications et Les services font!). Les adresses e-mail, bien que théoriquement très faciles à valider, ont leurs propres défis - mais néanmoins, il existe de nombreuses expressions régulières dans la nature qui ne sont pas tout à fait correctes.

Et puis il y a des numéros de téléphone. Ce sont difficiles. Vraiment dur. Dans cet article, je vais discuter de certains des défis concernant la collecte, la validation et l'affichage des numéros de téléphone.

Les plats clés

• Les numéros de téléphone sont complexes à gérer dans la programmation en raison de leurs formats variés et de la nature dynamique des systèmes de numérotation dans le monde.
• Les expressions régulières sont souvent insuffisantes pour valider les numéros de téléphone internationaux en raison de leur complexité et de leur variabilité.
• La norme E.164 est cruciale pour représenter sans ambiguïté les numéros de téléphone globaux, fournissant un format cohérent pour le stockage et l'utilisation du système.
• La bibliothèque LibPhonenumber de Google est un outil robuste pour analyser, valider et formater les numéros de téléphone, et il est disponible pour les environnements javascript et node.js.
• Le plugin jQuery Intl-Tel-Input améliore l'expérience utilisateur en s'intégrant avec LibPhonenumber pour gérer efficacement les champs de saisie téléphonique internationaux.
• Considérez toujours les problèmes juridiques et d'utilisabilité lors de la collecte des numéros de téléphone, de la conformité aux réglementations locales et de la maintenance de la confiance et du confort des utilisateurs.

Pourquoi les numéros de téléphone sont différents

Peut-être que vous pensez que les numéros de téléphone ont tendance à suivre un format assez rigide, comme celui-ci:

<br>
202-456-1111<br>

… qu'il devrait être simple de construire une expression régulière simple pour les valider. En fait, en voici un:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Eh bien, arrêtez-vous là. Pour commencer, voici quelques variations du nombre ci-dessus, qui sont tous parfaitement valides:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

Donc, sur la base de cela, nous savons que l'approbation d'expression régulière n'est pas aussi simple que nous le pensons pour la première fois - mais ce n'est que la moitié. Ces exemples sont juste pour un numéro basé sur les États-Unis. Bien sûr, si vous savez que le numéro que vous collectez sera pour un pays spécifique, vous pourrez peut-être utiliser une expression régulière. Sinon, cette approche ne le coupera pas.

Regardons certains des autres problèmes autour des numéros de téléphone, et pourquoi ils rendent notre travail encore plus difficile.

Les nombres changent

Toutes sortes de facteurs externes peuvent avoir des implications pour la numérotation du téléphone. Des pays entiers vont et viennent, introduisant de nouveaux préfixes de pays. Les nouvelles classifications des nombres introduisent de nouveaux systèmes de numérotation - taux premium, taux local, sans frais, etc. Lorsqu'un transporteur est à court d'un ensemble de chiffres - comme, malheureusement, le taux premium - il introduit simplement un nouveau préfixe.

Certains changements ont d'énormes implications; Au Royaume-Uni, il y a quelques années, par exemple, l'ensemble du système de numérotation régionale a subi un changement radical, pratiquement tous les code superficiels obtenant un «1» supplémentaire inséré. Même alors, la capitale avait un système subtilement différent. C'était probablement une décennie avant la modification de la signalisation à travers le pays pour refléter les changements.

Alors, bien sûr, il y a eu une croissance énorme et sans précédent du mobile. Le nombre de numéros de téléphone n'était plus largement limité au nombre de ménages, mais à plusieurs reprises. La pression continue sur le pool des nombres disponibles ne peut qu'augmenter la probabilité de changements supplémentaires.

codes de numérotation internationaux

Il est souvent important de capturer le code de numérotation international d'un numéro. Dans certains cas, le contexte pourrait signifier qu'ils ne sont pas nécessaires. Par exemple, si vous opérez dans un seul pays et que les numéros de téléphone sont capturés pour être utilisés par un opérateur humain, vous n'en aurez peut-être pas besoin. Mais pour tout ce qui est automatisé à distance - comme l'envoi de messages SMS - ou pour les valider efficacement, vous devrez capturer le préfixe du pays.

La bibliothèque des pays contient un tas d'informations géographiques qui comprennent des codes de numérotation internationale. Voici un extrait de pays.json de cette bibliothèque:

<br>
202-456-1111<br>

Comme vous pouvez le voir, cela démontre que l'Autriche utilise le code de numérotation international 43.

Alors, comment pourrions-nous utiliser ces informations? Eh bien, en utilisant la magie de Lodash (ou de soulignement), il y a quelques façons dont nous pouvons interroger les informations liées au code.

par exemple, pour savoir si un code de numérotation donné est valide:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Il existe des façons plus efficaces de le faire, bien sûr, de sorte que les exemples et les exemples suivants ne sont pas nécessairement optimisés pour la production.

Nous pouvons rechercher les pays qui utilisent un code de numérotation particulier:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

Enfin, nous pouvons obtenir les codes de numérotation pour un pays donné:

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

Vous trouverez ces fonctions emballées comme un module, ainsi que des tests unitaires, dans le référentiel qui accompagne l'article.

Même les codes de numérotation internationaux, cependant, ne sont pas aussi simples que vous le pensez. Le format peut varier - 1, 43, 962 1868 sont tous des codes valides. Il n'y a pas nécessairement une cartographie un à un; 44 Par exemple, est utilisé non seulement pour le Royaume-Uni, mais pour l'île de Man, Guernesey et Jersey.

Les nombres

doivent également être modifiés en fonction de l'emplacement de votre composition. De l'étranger, pour appeler un numéro britannique, vous devez abandonner le zéro et le préfixe leader avec le code de numérotation 44:

<br>
202-456-1111<br>

… devient…

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Vous pouvez également remplacer le «» par un double zéro:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

Pour compliquer encore les choses, certains nombres varient lorsqu'ils sont appelés de l'extérieur d'un pays en fonction du pays que vous composez de . Aux États-Unis, par exemple, les nombres doivent également être préfixés avec le code de sortie américain 011, donc l'exemple ci-dessus devient:

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

Heureusement, il existe un format que nous pouvons utiliser qui nous permettait de contourner ces variations.

e.164

Heureusement pour les développeurs, il existe une norme sans ambiguïté et internationalement reconnue pour les numéros de téléphone partout dans le monde appelé E.164. Le format est décomposé comme suit:

• Un numéro de téléphone peut avoir un maximum de 15 chiffres
• La première partie du numéro de téléphone est le code du pays
• La deuxième partie est le code de destination national (NDC)
• La dernière partie est le numéro d'abonné (SN)
• Le NDC et le SN ensemble sont collectivement appelés le nombre national (significatif)

( source )

voici le nombre de plus tôt, au format e.164:

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>

Nous pouvons utiliser le même format pour, comme exemple, un numéro britannique basé à Londres:

<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>

Nous pouvons représenter tout numéro de téléphone valide à l'aide du format E.164. Nous savons à quel pays il se réfère, et c'est sans relâche - ce qui en fait le choix idéal pour le stockage. Il est également couramment utilisé pour les services basés sur la téléphonie tels que les fournisseurs de SMS, car nous le verrons un peu plus tard.

Il y a bien sûr une prise. La norme E.164 pourrait être idéale pour le stockage, mais terrible pour deux choses. Premièrement, pratiquement personne ne taperait ou lirait son numéro dans ce format. Deuxièmement, il est sans espoir en termes de lisibilité. Plus tard cependant, lorsque nous regardons LibPhonenumber, nous verrons qu'il existe des façons de formater les nombres pour les humains.

Collecte des numéros de téléphone

Cependant, examinons la question de la collecte des numéros de téléphone.

HTML5 et l'entrée «Tél»

HTML5 a introduit un nouveau type d'entrée «Tel». Cependant, en raison des problèmes concernant les variations de format, il ne place en réalité aucune restriction sur ce que l'utilisateur peut taper, ni d'effectuer de validation de la même manière que, par exemple, l'élément de messagerie. Néanmoins, il existe certains avantages - lorsqu'ils sont utilisés sur un site mobile, un clavier téléphonique d'un utilisateur sera généralement affiché, plutôt qu'une disposition du clavier conventionnel.

Vous pouvez utiliser un seul élément pour collecter un nombre:

<span>/**
</span><span>* Gets the dialing codes for a given country
</span><span>*
</span><span>* <span>@param string country The two-character country code
</span></span><span>* <span>@return array An array of strings representing the dialing codes
</span></span><span>*/
</span><span>getCodes : function(country) {
</span><span>// Get the country entry
</span><span>var countryData = _.find(data, function(entry) {
</span><span>return (entry.cca2 == country);
</span><span>});
</span><span>// Return the code(s)
</span><span>return countryData.callingCode;
</span><span>}</span>

Alternativement, vous pouvez décomposer un nombre en éléments distincts:

<br>
202-456-1111<br>

La prise en charge du navigateur est assez bonne (par exemple Chrome 6, Firefox 4, Safari 5, c'est-à-dire 10), mais même dans un navigateur plus ancien, il retombera simplement dans un vieux champ de texte simple.

Si nous décidons qu'une expression régulière est suffisante - et rappelez-vous, il y a des problèmes - alors nous pouvons utiliser l'attribut de modèle pour ajouter une certaine validation:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Entrées masquées

Les entrées masquées sont une technique courante pour restreindre l'entrée des utilisateurs ou fournir des conseils quant au format attendu. Mais encore une fois, à moins que vous ne puissiez être convaincu que les chiffres seront toujours pour un pays particulier, il est très difficile de répondre aux variations internationales. Cependant, c'est une chose d'agacer les utilisateurs en faisant des hypothèses - demandant à un utilisateur non américain de fournir un état et un code postal. C'est une autre chose de rendre une forme complètement inutilisable, par exemple en forçant les gens à fournir des nombres dans le format d'un certain pays.

Néanmoins, ils peuvent être efficaces si vous savez que certains nombres seront dans une plage particulière. Voici un exemple d'une entrée masquée pour les numéros de téléphone américains.

une meilleure façon

Il existe un moyen meilleur et plus flexible de collecter les numéros de téléphone, sous la forme d'un excellent plugin jQuery. Il est illustré ci-dessous.

Vous pouvez également jouer avec une démo en direct ici.

L'utilisation est simple - assurez-vous que vous avez inclus JQuery, la bibliothèque et le fichier CSS, et que le sprite Flag est disponible et correctement référencé à partir du CSS - vous le trouverez dans Build / IMG / Flags.png .

Ensuite, créez un élément:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

Enfin, Intialisez-le comme suit:

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

Pour une liste complète des options de configuration, consultez la documentation. Plus tard, nous examinerons l'option UtilSScript, mais d'abord, nous devons nous plonger dans une autre bibliothèque utile.

Présentation de libphonenumber

Heureusement, il existe une solution à bon nombre de nos malheurs de validation et de mise en forme. Développé à l'origine pour le système d'exploitation Android, la bibliothèque LibPhonenumber de Google propose toutes sortes de méthodes et utilitaires pour travailler avec les numéros de téléphone. Mieux encore, il a été porté de Java à JavaScript, afin que nous puissions l'utiliser dans les applications Web ou Node.js.

Installation

Vous pouvez télécharger la bibliothèque à partir de la page d'accueil du projet sur - comme vous pouvez vous y attendre - Google Code.

Vous pouvez également l'obtenir via NPM. Voici la page du projet et pour installer à partir de la ligne de commande:

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>

Vous pouvez également l'installer en utilisant Bower:

<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>

Si vous songez à l'utiliser dans un projet frontal, soyez averti - même lorsqu'il est minifié et comprimé, il arrive à plus de 200 Ko.

Numéros d'analyse

Afin de démontrer les principales fonctionnalités de la bibliothèque, je vais supposer que vous écrivez une application Node.js. Vous pouvez trouver un exemple de code dans le référentiel qui complète cet article.

Tout d'abord, importez le téléphone:

<br>
202-456-1111<br>

Maintenant, vous pouvez utiliser sa méthode Parse () pour interpréter un numéro de téléphone:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Il y a un certain nombre de choses que nous pouvons faire avec cela. Importons d'abord quelques constantes de la bibliothèque. Modifiez votre déclaration de requise vers les éléments suivants:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

Maintenant, nous pouvons faire ce qui suit:

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

La sortie sera la suivante:

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>

Essayez maintenant d'analyser le numéro sans le code de numérotation international:

<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>

Cela lancera l'exception suivante:

<span>/**
</span><span>* Gets the dialing codes for a given country
</span><span>*
</span><span>* <span>@param string country The two-character country code
</span></span><span>* <span>@return array An array of strings representing the dialing codes
</span></span><span>*/
</span><span>getCodes : function(country) {
</span><span>// Get the country entry
</span><span>var countryData = _.find(data, function(entry) {
</span><span>return (entry.cca2 == country);
</span><span>});
</span><span>// Return the code(s)
</span><span>return countryData.callingCode;
</span><span>}</span>

C'est parce que sans lui dire explicable à quel pays le nombre est le nombre, il est impossible d'interpréter. La méthode Parse () prend un deuxième paramètre facultatif, qui est le code de pays ISO 3166-1 Alpha-2 (c'est-à-dire, deux caractères).

Si vous réessayez la ligne, mais cette fois en passant «nous» comme deuxième argument, vous constaterez que les résultats sont comme avant:

<br>
020 7925 0918<br>

Vous pouvez également jouer avec les formats; Tout cela fonctionnera aussi:

<br>
+44 20 7925 0918<br>

Interpréter un numéro du Royaume-Uni:

<br>
0044 20 7925 0918<br>

Cela sortira ce qui suit:

<br>
011 44 20 7925 0918<br>

Une fois que vous avez analysé un nombre, vous pouvez le valider - comme nous le verrons dans la section suivante.

valider un nombre

La validation

suit un modèle similaire; Encore une fois, il y a un deuxième argument facultatif, mais dont vous aurez besoin si le pays n'est pas indiqué implicitement.

Voici quelques exemples de nombres valides, où le code du pays est soit fourni comme deuxième argument, soit contenu dans le premier argument:

<br>
+12024561111<br>

Si vous ne fournissez pas le code du pays, ou si ce n'est pas implicite, vous obtenez la même erreur qu'avant:

<br>
+442079250918<br>

Voici quelques exemples où la validation échoue, renvoyant faux:

<span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span></span>

être averti, cependant, car un numéro non valide peut lancer une exception:

<span><!-- area code and number -->
</span><span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span>
</span><span><!-- country code, area code and number -->
</span><span><span><span><input</span> type<span>="tel"</span> name<span>="country"</span> size<span>="4"</span>></span> <span><span><input</span> type<span>="tel"</span> name<span>="area"</span> size<span>="6"</span>></span> <span><span><input</span> type<span>="tel"</span> name<span>="number"</span> size<span>="8"</span>></span>
</span><span><!-- US-style -->
</span>(<span><span><span><input</span> type<span>="tel"</span> size<span>="3"</span>></span>) <span><span><input</span> type<span>="tel"</span> size<span>="3"</span>></span> - <span><span><input</span> type<span>="tel"</span> size<span>="4"</span>></span></span>

déterminer le type d'un nombre

Parfois, il est utile de connaître le type d'un numéro de téléphone. Par exemple, vous souhaiterez peut-être vous assurer que vous avez reçu un numéro de mobile - vous prévoyez peut-être d'envoyer des messages SMS, par exemple pour implémenter l'authentification à deux facteurs - ou tenter d'éliminer les numéros de taux premium.

La fonction GetNumberType () de la bibliothèque fait exactement cela. Jetons un coup d'œil.

La fonction prend un numéro de téléphone analysé comme argument:

<span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span> pattern<span>="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$"</span>></span></span>

La valeur de retour est une constante définie dans le sous-module PhonenumberType - vous vous rappellerez que nous avons besoin que cela soit en tant que pnf.

Par exemple, interrogeons si le nombre en question est un mobile ou une ligne fixe:

<br>
202-456-1111<br>

Comme cela semble être le thème du sujet, il y a naturellement une prise. Parfois, même la bibliothèque Libphonenumber ne peut pas être sûre. Les nombres américains, par exemple, ne peuvent pas être facilement distingués; D'où la constante PNT.FIXED_LINE_OR_MOBILE.

Nous devrons simplement modifier notre exemple de code pour refléter cette incertitude:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Il existe également un certain nombre d'autres possibilités. Voici la liste complète actuellement:

• pnt.fixed_line
• pnt.mobile
• pnt.fixed_line_or_mobile
• pnt.toll_free
• pnt.premium_rate
• pnt.shared_cost
• pnt.voip
• pnt.personal_number
• pnt.pager
• pnt.uan
• pnt.unknown

Comme vous pouvez le voir, le PNT.Unknown reflète le fait que nous ne pouvons pas nécessairement glaner aucune information avec certitude. Ainsi, en résumé, alors que cette fonctionnalité peut être utile comme vérification initiale rapide, nous ne pouvons pas compter sur elle.

est le nombre en service?

Il existe de nombreux numéros de téléphone qui valideront, mais qui ne sont pas utilisés. Ils ont peut-être été déconnectés, non encore alloués, ou peut-être qu'une carte SIM a été abandonnée dans les toilettes.

Si vous devez vous assurer qu'un nombre n'est pas seulement valide mais aussi actif, il existe un certain nombre d'options ouvertes à vous.

Une approche consiste à exiger que les utilisateurs confirment leur numéro, de la même manière que vous pourriez exiger que les utilisateurs confirment leur adresse e-mail. Vous pouvez utiliser un service tel que Twilio pour envoyer un SMS, ou même passer un appel.

Voici un extrait de code très simple pour générer et envoyer un code de confirmation par SMS en utilisant Twilio:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

C'est alors un exercice trivial pour demander aux utilisateurs de saisir le code dans un formulaire de votre application Web pour le vérifier - ou vous pouvez même permettre aux gens de valider leur numéro en répondant au message.

Il existe également des services (payés) qui vérifieront si un nombre est en service pour vous en temps réel, comme celui de Byteplant.

Autres problèmes

juridique

Comme pour toute information personnelle, il y a aussi beaucoup de problèmes juridiques à attendre. Au Royaume-Uni, par exemple, le Service de préférence téléphonique (TPS) est un registre national des numéros de téléphone qui ont été inscrits par des personnes ne souhaitant pas recevoir des communications marketing. Il existe des services payants qui offrent des API pour vérifier un numéro par rapport à ce registre, comme celui-ci.

Considérations de l'utilisabilité

Il est très courant de demander jusqu'à trois numéros de téléphone différents sous une seule forme; par exemple le jour, le soir et le mobile.

Il convient également de se rappeler que demander des numéros de téléphone sur Internet peut apparaître comme plutôt intrusif. Si quelqu'un n'est pas disposé à fournir ces informations malgré vous en avoir fait un domaine requis, il fera probablement l'une des deux choses:

• tenter de «tromper» la validation. Selon l'approche, ils peuvent taper quelque chose comme «expert ex» ou entrer un numéro non valide - comme celui qui ne contient que des nombres.
• s'éloigner.

combinant le plugin jQuery avec libphonenumber

Vous vous souvenez peut-être que le plugin jQuery a une option plutôt nommée cryptiquement appelée ulsscript.

Cette option nous permet de profiter des fonctionnalités de validation et de formatage de LibPhonenumber. Après avoir sélectionné un pays - soit en utilisant la liste déroulante, soit en tapant le code de numérotation - il transformera le champ de texte en une entrée masquée qui reflète le format de numérotation de ce pays.

Le plugin contient une version emballée de LibPhonenumber; Passez le chemin d'accès à ce fichier au constructeur comme suit:

<br>
202-456-1111<br>

Comme je l'ai mentionné précédemment, gardez à l'esprit que cette approche doit être utilisée avec prudence, en raison de la taille du fichier de la bibliothèque LibPhonenumber. Le référencer ici dans le constructeur signifie cependant qu'il peut être chargé à la demande.

Affichage des numéros de téléphone

Nous avons examiné comment nous pouvons formater les numéros lorsque vous les affichez pour être plus «amicaux», en utilisant des formats tels que pnf.international et pnf.national.

Nous pouvons également utiliser les protocoles Tel et Callto pour ajouter des hyperliens aux numéros de téléphone, qui sont particulièrement utiles sur les sites mobiles - permettant aux utilisateurs de composer un numéro directement à partir d'une page Web.

Pour ce faire, nous avons besoin du format E.164 pour le lien lui-même - par exemple:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Bien sûr, vous pouvez utiliser la méthode Format () de la bibliothèque LibPhonenumber pour rendre à la fois la version E.164 (PNF.E164) et la version d'affichage plus conviviale.

Microdata

Nous pouvons également utiliser des microdata pour marquer sémantiquement les numéros de téléphone. Voici un exemple; Remarque l'utilisation de itemprop = "téléphone" pour marquer le lien:

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>

Résumé

Dans cet article, nous avons ouvert le nid Hornets qui est des numéros de téléphone. Il devrait être assez évident maintenant qu'il y a toutes sortes de complexités, de subtilités et de gotchas dont vous devez être conscient si vous devez collecter, les valider et les afficher.

Nous avons examiné quelques méthodes pour collecter des numéros - le type d'entrée "Tel", les entrées masquées et enfin le plugin jQuery Intl-tel.

Nous avons ensuite examiné certains des problèmes liés à la validation, et pourquoi les approches courantes telles que les expressions régulières sont souvent inadéquates, en particulier lorsque vous allez international.

Nous avons jeté un coup d'œil à la bibliothèque Libphonenumber de Google; L'utiliser pour analyser, valider, afficher et déterminer le type de numéros de téléphone.

Nous avons combiné le plugin Intl-Tel-Inport avec LibPhonenumber pour une expérience utilisateur encore meilleure, bien que celle qui a un coût en termes de performances.

Enfin, nous avons examiné comment nous pourrions marquer les numéros de téléphone dans notre HTML.

Il y a quelques recommandations que je ferais pour traiter les numéros de téléphone:

• à moins que vous n'opérez uniquement dans un seul pays, soyez conscient des différences internationales.
• Utilisez des entrées masquées avec prudence.
• Soyez très prudent avec la validation régulière basée sur l'expression.
• Dans la mesure du possible, utilisez E.164 pour le stockage.
• Utilisez la bibliothèque LibPhonenumber de Google.
• Lorsque vous affichez des numéros, formatez-les dans la mesure du possible, utilisez le type Tél: ou callto: lien et utilisez des microdata.

FAQ sur les numéros de téléphone dans JavaScript

Comment obtenir le code du pays à partir d'un numéro de téléphone en JavaScript?

Pour extraire le code du pays à partir d'un numéro de téléphone en JavaScript, vous pouvez tirer parti de la bibliothèque LibPhonenumber fournie par Google. Cette bibliothèque est un outil puissant pour l'analyse, la mise en forme et la validation des numéros de téléphone, ce qui en fait un choix idéal pour extraire avec précision les codes de pays. Pour commencer, vous devrez installer la bibliothèque à l'aide de NPM, puis l'importer dans votre fichier javascript. Une fois importé, vous pouvez utiliser la classe PhonenumberUtil pour fonctionner efficacement avec les numéros de téléphone.
Pour extraire le code du pays à partir d'un numéro de téléphone, vous devez d'abord analyser le numéro de téléphone à l'aide de la fonction Parse. Cette fonction prend le numéro de téléphone en tant que chaîne et un code régional par défaut facultatif, qui est généralement le code de pays ISO 3166-1 Alpha-2. Après l'analyse, vous pouvez accéder à l'objet Phonenumber et utiliser la méthode GetCountryCode pour obtenir le code du pays comme entier. Cette approche garantit une précision dans la gestion des numéros de téléphone internationaux et prend en compte divers formats régionaux

Comment valider un numéro de téléphone avec un code de pays en JavaScript?

La validation d'un numéro de téléphone avec un code de pays en JavaScript peut être une tâche complexe en raison des différents formats de numéro de téléphone international. Pour garantir une validation précise, une approche efficace consiste à utiliser la bibliothèque «LibPhonenumber» par Google. Cette bibliothèque propose des outils complets pour l'analyse, la mise en forme et la validation des numéros de téléphone, ce qui en fait un choix fiable à cet effet.
Pour commencer, vous devez installer la bibliothèque "LibPhonenumber" à l'aide de NPM, puis de l'importer dans votre fichier javascript . Une fois importé, vous pouvez tirer parti de la classe PhonenumberUtil de la bibliothèque pour effectuer la validation du numéro de téléphone. La fonction isValidNumber, en particulier, vous permet de valider un numéro de téléphone analysé, renvoyant vrai si le numéro est valide ou faux si ce n'est pas le cas. En analysant le numéro de téléphone en utilisant les capacités de la bibliothèque, vous vous assurez qu'il adhère au format spécifique et aux règles associées au code de pays prévu.
Cette approche fournit une solution robuste pour valider les numéros de téléphone avec les codes de pays, offrant un moyen précis de moyen de Gérer les numéros de téléphone internationaux avec des formats et des normes variables. En implémentant la bibliothèque «LibPhonenumber», vous pouvez améliorer considérablement la précision et la fiabilité de la validation du numéro de téléphone dans vos applications JavaScript.

Comment séparer le code du pays d'un numéro de téléphone en javascript?

La séparation du code du pays d'un numéro de téléphone en JavaScript est une tâche courante, en particulier lorsqu'il s'agit de numéros de téléphone internationaux. Une approche pratique consiste à utiliser des expressions régulières et une manipulation de cordes. Vous pouvez définir un modèle d'expression régulière pour correspondre au code du pays, qui est généralement représenté comme un signe plus suivi d'un ou plusieurs chiffres. L'expression régulière, telle que (D), capture efficacement le code du pays à partir du numéro de téléphone.
Une fois que vous avez le modèle d'expression régulière en place, vous pouvez utiliser la méthode Exec pour l'appliquer au numéro de téléphone. La méthode EXEC renvoie un tableau contenant la partie correspondante du numéro de téléphone et de tous les groupes capturés. Dans ce cas, le code de pays capturé est accessible à partir du premier groupe du tableau (index 1). En suivant ce processus, vous pouvez séparer avec précision le code de pays du numéro de téléphone et le rendre disponible pour une utilisation ultérieure dans votre application JavaScript.
Cette méthode est polyvalente et peut être adaptée pour fonctionner avec divers formats de numéro de téléphone. Que vous gérez des entrées ou des numéros de téléphone des utilisateurs à partir de sources externes, cette approche garantit que vous pouvez extraire de manière fiable le code du pays, une étape précieuse pour travailler avec les numéros de téléphone internationaux.

Comment formater mon numéro de téléphone à l'international?

Formatage d'un numéro de téléphone à usage international est essentiel pour assurer la clarté et la compatibilité entre différentes régions. Un numéro de téléphone au format international se compose généralement de trois composants principaux: le code du pays, le code régional (le cas échéant) et le numéro de téléphone local. Le code du pays est représenté par un signe plus () suivi du code numérique, tel que 1 pour les États-Unis. Il sert d'identifiant universellement reconnu pour le pays ou la région.
Dans certains cas, un code régional peut être inclus, souvent séparé du reste du nombre avec un espace ou un trait d'union. Le numéro de téléphone local suit, ce qui peut varier en longueur et peut contenir des séparateurs ou une ponctuation supplémentaires. Le format spécifique peut différer entre les pays, il est donc important de suivre les conventions locales lorsqu'elles sont disponibles. En adhérant à cette structure, vous vous assurez que les numéros de téléphone sont facilement reconnaissables et utilisables à travers les frontières internationales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!