La Validation Des Numéros De Téléphone À L'Aide De Javascript

Je travaille sur un formulaire web avec plusieurs champs et un bouton envoyer. Lorsque le bouton est cliqué, je suis pour vérifier que les zones de texte ont été remplies et que le numéro de téléphone est dans le bon format. Je n'accepte que 7 ou 10 chiffres des numéros de téléphone, mais des caractères tels que (,), (-), etc sont acceptables. Si cette case est vide ou que le numéro de téléphone n'est pas dans le format correct (pas 7 ou 10 chiffres, pas un nombre) ou a été laissé en blanc, je suis censé ajouter une bordure rouge autour de la zone de texte. Cette frontière est censé rester en place jusqu'à ce que l'utilisateur corrige l'erreur.

Je ne peux pas obtenir que cela fonctionne correctement. J'ai essayé plusieurs différentes façons de le faire, mais ont obtenu plusieurs différents types d'erreurs. Une façon semblait fonctionner, mais la bordure rouge ne s'affiche que pour une seconde, puis a disparu, et la valeur dans la zone de texte a été remis à zéro.

Voici mon code et un lien vers un jsfiddle que j'ai créée:

Javascript:

<script type="text/javascript">
    function validateForm() {
        return checkPhone();
    }
    function checkPhone() {
        var phone = document.forms["myForm"]["phone"].value;
        var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
            if(phone.value.match(phoneNum)) {
                return true;
            }
            else {
                document.getElementById("phone").className = document.getElementById("phone").className + " error";
                return false;
            }
        }
</script>

HTML:

<form name="myForm" onsubmit = "return validateForm()">
    Phone Number: <input type="text" id="phone"><br>
</form>

JSFiddle:

http://jsfiddle.net/mkdsjc0p/

Vous êtes réglage phone les éléments value de la propriété, puis dans le test, vous avez accès au value bien, de nouveau, cette fois de la valeur que vous avez déjà obtenu, qui n'existe pas.
double possible de Javascript numéro de téléphone de validation
Vous avez déjà une référence à la forme de contrôle en tant que téléphone, pourquoi utiliser document.getElementById? Et plutôt que match, vous devriez être en utilisant test.
Ce n'est pas un dupe de l'référencé question, parce que les critères de "qu'est ce qu'un numéro de téléphone" sont différents. Les solutions présentées dans le référencés question n'est pas de répondre aux exigences de ici.

OriginalL'auteur Beth Tanner | 2014-10-06

11

Comme pour votre regexp je suppose qu'il doit être
```
^\+{0,2}([\-\. ])?($?\d{0,3}$)?([\-\. ])?$?\d{0,3}$?([\-\. ])?\d{3}([\-\. ])?\d{4}
```
Mais en général, la présomption n'est pas correcte car on peut entrer quelque chose comme
++44 20 1234 56789 ou +44 (0) 1234 567890
il est préférable de faire quelque chose comme ceci
```
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {  return true;  }
```
ceci permet d'assurer que la valeur entrée est de 7 à 10 chiffres néanmoins que la mise en forme est. Mais vous devez penser à la longueur maximale pour le nombre pourrait être plus que 10 comme dans l'exemple ci-dessus.

OriginalL'auteur i100

<html>
<title>Practice Session</title>
<body>           
<form name="RegForm" onsubmit="return validate()" method="post">  
<p>Name: <input type="text" name="Name"> </p><br>        
<p>Contact: <input type="text" name="Telephone"> </p><br>   
<p><input type="submit" value="send" name="Submit"></p>          
</form> 
</body>
<script> 
function validate()                                    
{ 
var name = document.forms["RegForm"]["Name"];                
var phone = document.forms["RegForm"]["Telephone"];  
if (name.value == "")                                  
{ 
window.alert("Please enter your name."); 
name.focus();
return false;
}
else if(isNaN(name.value) /*"%d[10]"*/)
{
alert("name confirmed");
}
else{ 
window.alert("please enter character"); 
}   
if (phone.value == "")                           
{ 
window.alert("Please enter your telephone number."); 
phone.focus();
return false; 
} 
else if(!isNaN(phone.value) /*phone.value == isNaN(phone.value)*/)
{
alert("number confirmed");
}
else{
window.alert("please enter numbers only");
}   
}
</script> 
</html>

OriginalL'auteur Sachin Gupta

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Homepage-30-06-2016/Css.css" >
<title>Form</title>
<script type="text/javascript">
function isChar(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 47 && charCode < 58) {
document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
document.getElementById("fullname").focus();
document.getElementById("fullname").style.borderColor = 'red';
return false;
}
else {
document.getElementById("error").innerHTML = "";
document.getElementById("fullname").style.borderColor = '';
return true;
}
}
</script>
</head>
<body>
<h1 style="margin-left:20px;"Registration Form>Registration Form</h1><hr/>
Name: <input id="fullname" type="text" placeholder="Full Name*"
name="fullname" onKeyPress="return isChar(event)" onChange="return isChar(event);"/><label id="error"></label><br /><br />
<button type="submit" id="submit" name="submit" onClick="return valid(event)" class="btn btn-link text-uppercase"> Submit now</button>

pouvez-vous ajouter des détails à votre réponse?

OriginalL'auteur vishwanath

0

Vous pouvez consulter le site suivant pour connaître le numéro de téléphone de validation
```
https://www.w3resource.com/javascript/form/non-empty-field.php
```
OriginalL'auteur Codemaker
0

Avoir semblent tout simplement trop nombreux cas de bord, je suis allé pour un simple contrôle:

^(([0-9\ \+\_\-\,\.\^\*\?\$\^\#])|(ext|x)){1,20}$

La première chose que l'on peut remarquer est de permettre la répétition de "ext", mais le but de cette expression est d'empêcher les utilisateurs accidentellement entrer e-mail id, etc. au lieu de numéros de téléphone, à qui il ne.

OriginalL'auteur Sahil Ahuja

-2

if (charCode > 47 && charCode < 58) {
document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
document.getElementById("fullname").focus();
document.getElementById("fullname").style.borderColor = 'red';
return false;
} else {
document.getElementById("error").innerHTML = "";
document.getElementById("fullname").style.borderColor = '';
return true;
}

Veuillez expliquer comment/pourquoi ce code résout le problème.
Bienvenue sur Stackoverflow. Il serait mieux si vous checkout Comment Répondre de la page pour les futurs efforts à débordement de Pile. -Merci

OriginalL'auteur subi

Vous devez vous connecter pour publier un commentaire.