web-dev-qa-db-fra.com

Validation des numéros de téléphone à l'aide de Javascript

Je travaille sur un formulaire Web avec plusieurs champs et un bouton d'envoi. Lorsque le bouton est cliqué, je vérifie que les zones de texte requises ont été remplies et que le numéro de téléphone est au bon format. Je ne peux accepter que des numéros de téléphone à 7 ou 10 chiffres, mais les caractères tels que (,), (-), etc. sont acceptables. Si cette case est vide ou si le numéro de téléphone n’est pas au format correct (pas 7 ou 10 chiffres, ni un chiffre) ou a été laissé en blanc, je suis censé ajouter une bordure rouge autour de la zone de texte. Cette bordure est supposée rester en place jusqu'à ce que l'utilisateur corrige l'erreur. 

Je n'arrive pas à faire fonctionner ça correctement. J'ai essayé plusieurs manières différentes de procéder, mais j'ai eu plusieurs types d'erreurs. Une solution semblait fonctionner, mais la bordure rouge ne s’affiche que pendant une seconde, puis a disparu et la valeur dans la zone de texte a été réinitialisée. 

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

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/

javascripthtmlvalidationphone-number
4
Beth Tanner

Quant à votre expression rationnelle, je suppose que cela devrait ê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 pourrait entrer quelque chose comme ++ 44 20 1234 56789 ou +44 (0) 1234 567890il vaut mieux faire quelque chose comme ça.

var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {  return true;  }

cela garantira que la valeur entrée comporte 7 à 10 chiffres, quelle que soit la mise en forme. Mais vous devez penser à la longueur maximale du nombre peut être supérieure à 10, comme dans l'exemple ci-dessus.

10
i100

function telephoneCheck(str) {
  var a = /^(1\s|1|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/.test(str);
  alert(a);
}
telephoneCheck("(555) 555-5555");

Où str pourrait être l'un des formats suivants: 555-555-5555 (555) 555-5555 (555) 555-5555 1 555 555 5555 

4
Frawel

Essaye ça Je travaille.

<form>
<input type="text" name="mobile" pattern="[1-9]{1}[0-9]{9}" title="Enter 10 digit mobile number" placeholder="Mobile number" required>
<button>
Save
</button>
</form>

https://jsfiddle.net/guljarpd/12b7v330/

2
Guljar Prasad
<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>
1
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>
0
vishwanath

Vous pouvez consulter le site suivant pour connaître la validation du numéro de téléphone.

https://www.w3resource.com/javascript/form/non-empty-field.php
0
Codemaker