Numéro de téléphone regex en javascript

Lors de la vérification d'un formulaire HTML, il est essentiel de valider le numéro de téléphone. Selon la région, un numéro de téléphone valide peut avoir plusieurs formats. Il existe des règles générales, comme limiter le nombre de chiffres ou garder le nombre à seulement des valeurs numériques. Cependant, dans certaines situations, un numéro de téléphone peut avoir un format qui comprend des caractères spéciaux tels qu'un signe plus, un tableau de bord et des parenthèses, ou il peut avoir un format complètement différent de celui d'autres pays ou régions.

Cette étude expliquera le regex pour valider le numéro de téléphone en JavaScript.

Numéro de téléphone regex en javascript

Les expressions régulières sont la méthode la plus simple pour valider les numéros de téléphone en JavaScript. Cependant, selon les préférences de l'utilisateur, les numéros de téléphone peuvent être formatés de différentes manières. Voici quelques expressions régulières pour la validation du numéro de téléphone.

Exemple 1: Numéro de téléphone de base Validation Regex
Ici, les modèles regex divisés ci-dessous ou les expressions régulières ne permettent que des numéros de téléphone avec 10 chiffres. Aucun caractère spécial, y compris les espaces, n'est autorisé.

Motif regex
Suivez le modèle regex donné pour la validation du numéro de téléphone de base:

/ ^ \ d 10 $ /

Ou

/ ^ \ d 3 \ d 3 \ d 4 $ /

Voici une ventilation de tous les éléments pour aider les lecteurs à comprendre ce qu'il contient.

• "^”Désigne le début de la chaîne
• "/ /«Le caractère de slash avant est utilisé pour indiquer les limites de l'expression régulière
• "d»Signifie chiffres
• "»Indique la limite
• "\”Le personnage de barre arrière est le personnage d'évasion
• "$”Désigne la fin de la chaîne

Utilisez l'un des exploits ci-dessus pour le numéro de téléphone validant sans aucun caractère spécial ou délimiteur.

Dans le fichier html, créez un formulaire en utilisant le code ci-dessous:

Téléphone de base Regex sans aucun délimiteur

Téléphone #:

s'il vous plaît entrer un numéro de téléphone valide

Soumettre

Dans l'extrait de code ci-dessus,

• Tout d'abord, créez une forme avec l'ID "former".
• Créez ensuite un champ de texte d'entrée pour la valeur d'entrée et attribuez un ID "nombre".
• Un paragraphe utilisant

  balise qui affichera une erreur lorsque la valeur d'entrée n'est pas valide.

• Créez un bouton de soumission avec l'ID "soumettre".

Les classes CSS suivantes sont utilisées pour le message d'erreur:

.erreur

La couleur rouge;

.msg

Affichage: aucun;

Le formulaire HTML ressemblera à:

Dans le fichier JavaScript, utilisez les lignes de code ci-dessous:

fonction validePhonenumber (e)
var pNumber = document.getElementByid ('numéro').valeur;
si (!phoneRegex (pNumber))
document.getElementByid ('error').liste de classe.ajouter ('msg');
alert ("soumis");

autre
document.getElementByid ('error').liste de classe.retirer ('msg');

e.PARVEFAULT ();

Dans cet extrait de code:

• Définir une fonction "validerPhonenumber ()".
• Obtenez la valeur du champ de saisie à l'aide de l'ID "nombre"Avec l'aide du"getElementByid ()"Méthode et le stocker dans une variable"pnombrage".
• Appelez la fonction "phoneRegex ()"En passant le numéro d'entrée"pnombrage«Comme argument, et vérifiez si le nombre d'entrée est égal au regex.
  • Si oui! Affiche ensuite une alerte avec le message "soumis"Et ajoute la classe"msg" en utilisant le "liste de classe.ajouter()»Méthode qui n'en affiche aucune.
  • Si la condition n'est pas vraie, montrez l'erreur en appelant «liste de classe.retirer()”Méthode, qui montrera une erreur.

Après cela, définissez une fonction appelée «phoneRegex ()«Lorsque le motif Regex sera défini pour le numéro de téléphone validant:

fonction phoneregex (input_str)
var regpattern = / ^ \ d 3 \ d 3 \ d 4 $ /;
retourner regpattern.test (input_str);

Enfin, appelez la fonction "validerPhonenumber ()"Sur la soumission en utilisant l'ID du bouton"soumettre"Avec l'aide du"addEventListener ()" méthode:

document.getElementByid («formulaire»).addEventListener («soumettre», validerphonenumber);

Sortir

La sortie ci-dessus signifie que le modèle Regex pour les numéros de téléphone avec 10 chiffres et sans aucun caractère spécial ou délimiteur fonctionne avec succès.

Exemple 2: Numéro de téléphone complexe Validation Regex
Les modèles regex divisés ci-dessous ou les expressions régulières permettent des numéros de téléphone avec 10 chiffres et des caractères spéciaux, notamment le signe plus, le tableau de bord et les parenthèses.

Modèle regex pour valider les numéros de téléphone avec Delimiter Dash (-)
Le regex pour valider les numéros de téléphone avec 10 chiffres et un tableau de bord spécial (-):

/ ^ \ d 3 [-] \ d 3 [-] \ d 4) $ /

Le motif montre:

• "^”Désigne le début de la chaîne
• "/ /«Le caractère de slash avant est utilisé pour indiquer les limites de l'expression régulière
• "d»Signifie chiffres
• "»Indique la limite
• "[-]»Indique un caractère spécial autorisé
• "\”Le personnage de barre arrière est le personnage d'évasion
• "$”Désigne la fin de la chaîne

Ajoutez le motif regex ci-dessus dans le "phoneRegex ()”Fonction définie:

fonction phoneregex (input_str)
var regpattern = / ^ \ d 3 [-] \ d 3 [-] \ d 4) $ /
retourner regpattern.test (input_str);

La sortie correspondante sera:

Modèle regex pour valider les numéros de téléphone avec les délimiteurs, y compris Dash (-) et Braces ()
Le regex pour valider les numéros de téléphone avec 10 chiffres et les appareils orthopédiques de caractères spéciaux (), et Dash (-):

/ ^ \ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $ /

Le motif montre:

• "^”Désigne le début de la chaîne
• "/ /«Le caractère de slash avant est utilisé pour indiquer les limites de l'expression régulière
• "d»Signifie chiffres
• "»Indique la limite
• "[-]»Indique un caractère spécial autorisé
• "(?»Indique également comme autorisé dans l'entrée
• "\”Le personnage de barre arrière est le personnage d'évasion
• "$”Désigne la fin de la chaîne

Ajoutez l'expression régulière ci-dessus dans le «phoneRegex ()”Fonction définie:

fonction phoneregex (input_str)
var regpattern = / ^ \ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $ /;
retourner regpattern.test (input_str);

Sortir

La sortie ci-dessus accepte les caractères spéciaux ou les délimiteurs en entrée, y compris les accolades et les tirets avec le numéro de téléphone à 10 chiffres. Il affiche une erreur tandis que le signe (+) est utilisé dans l'entrée.

Modèle regex pour valider les numéros de téléphone avec tous les délimiteurs, y compris Dash (-), Bracets (), DOT (.), Les espaces et (+) signe
Le regex pour valider les numéros de téléphone avec 10 chiffres et des caractéristiques spéciales (), Dash (-), Dot (.), le signe plus (+) et l'espace:

/ ^ [\ +]?[(]?[0-9] 3 [)]?[- \ s \.]]?[0-9] 3 [- \ S \.]]?[0-9] 4 $ /

Le motif montre:

• "^”Désigne le début de la chaîne
• "/ /«Le caractère de slash avant est utilisé pour indiquer les limites de l'expression régulière
• "d»Signifie chiffres
• "»Indique la limite
• "[-]»Indique un caractère spécial autorisé
• "[(]?»Indique également comme autorisé dans l'entrée
• "\ s”Désigne un espace
• "\.»Indique le point
• "\”Le personnage de barre arrière est le personnage d'évasion
• "$”Désigne la fin de la chaîne

Utilisez le modèle ci-dessus dans le «phoneRegex ()”Fonction définie:

fonction phoneregex (input_str)
var regpattern = / ^ [\ +]?[(]?[0-9] 3 [)]?[- \ s \.]]?[0-9] 3 [- \ S \.]]?[0-9] 4 $ /;
retourner regpattern.test (input_str);

Sortir

Nous avons compilé tous les modèles regex possibles ou expressions régulières pour valider les numéros de téléphone.

Conclusion

L'utilisation d'expressions régulières en JavaScript est le moyen le plus simple de valider les numéros de téléphone. Il y a beaucoup de vérifications que le développeur peut appliquer sur le numéro de téléphone à l'aide de regex. Les vérifications ne peuvent être que des nombres ou des nombres avec des caractères spéciaux ou des délimiteurs, y compris des tirets, des accolades, des points, des espaces et le signe plus. Cette étude explique différents experts qui peuvent valider le numéro de téléphone en JavaScript.