2017-01-16 8 views
0

Как сделать проверку на 10-значный номер мобильного телефона с помощью JQuery

<div> 
 
     <span id="mobile-valid"> 
 
      <i class="fa fa-check"></i> 
 
       Valid Mobile No 
 
     </span> 
 
     <span id="mobile-invalid" > 
 
      
 
       Invalid mobile No 
 
     </span> 
 
     </div> 
 
    <div> 
 
     
 
      Mobile No 
 
     </div> 
 

 
     <div> 
 
     <input id="mobile-num" type="text"/> 
 
    
 
    </div>

Как сделать проверку на 10-значный номер мобильного телефона Использование JQuery Ajax? Только номера разрешается не могут использовать символы или буквенно-цифровой characters.So, как может Я использую JQuery Ajax, чтобы сделать validation.I хочет показать на выше поле ввода, что Invalid Email й (не хочу, чтобы показать предупреждение)

+1

вы можете сделать с поиском Regex для регулярных выражений, которые позволяют только цифры, а не какой-либо другой символ –

+1

Вы не делаете нужен AJAX вообще. –

+2

почему бы не использовать тип входного номера – guradio

ответ

4

Это будет работать для вас ...

$(document).ready(function(){ 
 
    
 
    $("#mobile-num").on("blur", function(){ 
 
     var mobNum = $(this).val(); 
 
     var filter = /^\d*(?:\.\d{1,2})?$/; 
 

 
      if (filter.test(mobNum)) { 
 
      if(mobNum.length==10){ 
 
        alert("valid"); 
 
       $("#mobile-valid").removeClass("hidden"); 
 
       $("#folio-invalid").addClass("hidden"); 
 
      } else { 
 
       alert('Please put 10 digit mobile number'); 
 
       $("#folio-invalid").removeClass("hidden"); 
 
       $("#mobile-valid").addClass("hidden"); 
 
       return false; 
 
       } 
 
      } 
 
      else { 
 
       alert('Not a valid number'); 
 
       $("#folio-invalid").removeClass("hidden"); 
 
       $("#mobile-valid").addClass("hidden"); 
 
       return false; 
 
      } 
 
    
 
    }); 
 
    
 
});
.hidden{ 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <div id="mobile"> 
 
\t <div class="input"> 
 
\t \t <div class="label"> 
 
\t \t <div class="label-1"> 
 
\t \t \t <span id="mobile-valid" class="hidden mob"> 
 
\t \t \t \t <i class="fa fa-check pwd-valid"></i>Valid Mobile No 
 
\t \t \t </span> 
 
\t \t \t <span id="folio-invalid" class="hidden mob-helpers"> 
 
\t \t \t \t <i class="fa fa-times mobile-invalid"></i>Invalid mobile No 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t <div class="col-xs-3"> 
 
\t \t \t <div class="label-2"> 
 
\t \t \t Mobile No 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-xs-9"> 
 
\t \t \t <input id="mobile-num" type="text" class="form-control form-change-element" /> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </div>

+0

Спасибо большое @Samir этот код работал – ani

0

попробовать такую ​​вещь

var value = "1234567....."; 
var NumberRegex = /^[0-9]*$/; 
if(value.length <= 10){ 
if(NumberRegex.test(value)){ 
//do whatever you want to 
}else{ 
alert('invalid') 
} 

}

0
<form action="#"> 
    Mobile number: <input type="text" name="mobile" pattern="^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$" title="Enter Valid mobile number ex.9811111111" required> 
    <input type="submit"> 
</form> 

начиная с 9,8,7 вы можете добавить больше, а также.

вы можете проверить его с помощью https://regex101.com/

Действительного номера будет.

9883443344 
09883443344 
919883443344 
0919883443344 
+919883443344 
+91-9883443344 
0091-9883443344 
+91 -9883443344 
+91- 9883443344 
+91 - 9883443344 
0091 - 9883443344 
0

Попробуйте этот код. Он содержит десять цифр номера валидацию для мобильных устройств:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <style type="text/css"> 
    body 
{ 
    padding: 10px; 
    font-family: Arial; 
    Font-size: 10pt; 
} 
span 
{ 
    font-weight:bold; 
} 

.san{ 
    height: 26px; 
    width: 250px; 
    border: 1px solid #9E9E9E; 
    padding: 5px; 
    border-radius: 5px; 
    margin: 10px; 

} 

    </style> 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function() { 
    $('#txtPhone').blur(function(e) { 
     if (validatePhone('txtPhone')) { 
      $('#spnPhoneStatus').html('Valid Mobil Number'); 
      $('#spnPhoneStatus').css('color', 'green'); 
     } 
     else { 
      $('#spnPhoneStatus').html('Invalid Mobile Number'); 
      $('#spnPhoneStatus').css('color', 'red'); 
     } 
    }); 
}); 

function validatePhone(txtPhone) { 
    var a = document.getElementById(txtPhone).value; 
    var filter = /[1-9]{1}[0-9]{9}/; 
    if (filter.test(a)) { 
     return true; 
    } 
    else { 
     return false; 
    } 
} 
});//]]> 

</script> 
</head> 
<body> 
    Phone Number: <input type='text' id='txtPhone' class="san" maxlength="10"/> 
<span id="spnPhoneStatus"></span> 
</body> 
</html> 

Вот является Demo проверить его