Travailler avec les numéros de téléphone dans le code JavaScript

L'un des problèmes majeurs auxquels les développeurs sont confrontés dans leur développement précoce est de savoir comment prendre les données d'un utilisateur, puis valider ces données. Si vous prenez une entrée comme un nom ou un numéro d'enregistrement d'un utilisateur, vous pouvez facilement valider ces données, cependant, il devient un peu complexe lorsque vous prenez des commentaires comme numéro de téléphone.

Dans cet article, nous allons suivre comment prendre un numéro de téléphone en entrée d'un utilisateur, puis le valider en fonction de nos besoins dans ce post en utilisant la balise d'entrée HTML5 avec TEL, puis en utilisant une balise d'entrée simple de HTML et en la validant nous-mêmes en utilisant javascript.

Utilisation de la balise d'entrée HTML5 avec TEL Type

Nous pouvons utiliser la balise d'entrée HTML5 pour prendre les entrées de l'utilisateur et nous pouvons donner le type de Tél dans la balise d'entrée pour dire au navigateur que cette boîte d'entrée devrait prendre un numéro de téléphone. Le type TEL de l'entrée HTML5 présente certains avantages que nous pouvons définir le requis Attribut dans la balise d'entrée indiquant au navigateur que l'utilisateur ne peut pas continuer sans entrer dans le numéro de téléphone et l'autre est que nous pouvons définir un attribut de modèle. Voyons la balise d'entrée dans HTML:

Dans le code ci-dessus, nous pouvons voir que nous avons donné une expression régulière comme modèle à la balise d'entrée et donc l'utilisation de cela validera le numéro de téléphone. Voyons un programme HTML approprié:

Exemple: 123-456-7890

Soumettre

Dans le code ci-dessus, nous avons initialisé la balise d'étiquette qui montre un exemple du numéro de téléphone qui est accepté par la balise d'entrée ci-dessous où nous avons défini un modèle. Maintenant, la balise d'entrée elle-même sera responsable de la validation de l'entrée prise de l'utilisateur. Après cela, nous avons défini un bouton et lui avons donné le type de bouton. Chaque fois qu'un utilisateur cliquera sur le soumettre bouton Il générera une réponse en fonction de l'action de la balise de formulaire. Certains exemples sont ci-dessous:

Si nous cliquons sur le bouton Soumettre en laissant la zone d'entrée du numéro de téléphone vide:

Si nous donnons un mauvais modèle et cliquez sur le bouton Soumettre, nous verrons l'avertissement suivant:

Utilisation de JavaScript pour valider le numéro de téléphone

Nous pouvons également valider le numéro de téléphone à l'aide de JavaScript. Pour cela, nous créerons une balise d'entrée et un bouton en HTML de la manière suivante:

Exemple: 123-456-7890

Soumettre

Nous avons utilisé l'événement OnClick sur l'élément de bouton qui signifie que chaque fois qu'un utilisateur clique sur le bouton Soumettre, la fonction handleclick () commencera à exécuter. Cette fonction handleclick () sera initialisée dans un fichier séparé code.js que nous avons référencé en utilisant le scénario Tag vue dans le code ci-dessus.

Travaillez maintenant sur la partie javascript:

// Fonction pour gérer cliquez sur le bouton Soumettre
const handleclick = () =>
// Obtenir la référence de l'entrée de MyPhone
Var entrée = document.getElementByid ("myphone").valeur;
// format pour le numéro de téléphone
format var = / ^ \ (?([0-9] 3) \)?[-]?([0-9] 3) [-]?([0-9] 4) $ /;
// expressions conditionnelles
if (input === ")
alert ("Veuillez entrer le numéro de téléphone")

else if (entrée.correspond à (format))
alert ("Numéro de téléphone:" + entrée);

autre
alert ("type à l'aide du format correct");

Dans le code ci-dessus, nous avons d'abord initialisé la fonction handleclick (), puis nous faisons référence à la valeur de la balise d'entrée. Après cela, nous définissons le format du numéro de téléphone que nous voulons utiliser des expressions régulières. Un exemple de numéro de téléphone accepté, dans ce cas, serait 123-456-7890. Ensuite, nous utilisons les instructions conditionnelles et nous vérifions que si l'entrée est vide, alors alerte Veuillez saisir le numéro de téléphone Sinon, si l'entrée correspond au format, alerte ce numéro, autrement, le numéro que l'utilisateur a des types est dans le mauvais format. Voyons la sortie une par une:

Tout d'abord, nous cliquerons sur le bouton Soumettre tout en quittant la boîte d'entrée vide:

Ensuite, nous tapons un mauvais numéro de format, alors nous verrons la sortie suivante:

En fin de compte, allons-nous pour le bon format et voyons la sortie:

Conclusion

La validation des numéros de téléphone en JavaScript peut devenir un mal de tête pour un nouveau développeur. Il existe deux méthodes que nous pouvons utiliser pour valider les numéros de téléphone. Tout d'abord, pour prendre les commentaires d'un utilisateur à l'aide d'une balise d'entrée HTML. À côté de valider le numéro de téléphone, nous donnons à la balise d'entrée le type de TEL et un modèle auquel il devrait valider. La deuxième méthode consiste à créer un programme JavaScript personnalisé qui validera votre numéro de téléphone en fonction d'un format donné donné comme une expression régulière.

Dans cet article, nous avons appris à prendre un numéro de téléphone comme entrée d'un utilisateur, puis nous avons validé ce numéro de téléphone à l'aide de deux méthodes; Balise d'entrée HTML5 avec type TEL et logique JavaScript personnalisée.