如何使用 jQuery 验证 10 位手机号码

问题描述 投票:0回答:8

<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>

如何使用 jQuery Ajax 对 10 位手机号码进行验证?只允许数字不能使用字符或字母数字字符。那么我如何使用 jquery Ajax 进行验证。我想在上面的输入框中显示无效的电子邮件。和(不想显示警报)

javascript jquery html client-side-validation
8个回答
7
投票

这对你有用...

$(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>
	<div id="mobile">
	  <div class="input">
		<div class="label">
		  <div class="label-1">
			<span id="mobile-valid" class="hidden mob">
				<i class="fa fa-check pwd-valid"></i>Valid Mobile No
			</span>  
			<span id="folio-invalid" class="hidden mob-helpers">
				<i class="fa fa-times mobile-invalid"></i>Invalid mobile No
			</span>
		  </div>
		</div>
		<div class="row">
		  <div class="col-xs-3">
			<div class="label-2">
			  Mobile No
			</div>
		  </div>
		  <div class="col-xs-9">
			<input id="mobile-num" type="text" class="form-control form-change-element" />
		  </div>
		</div>
	  </div>
	</div>


3
投票
<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

1
投票

在你的 jquery 函数中尝试这段代码

var mobileNum = $(this).val();
var validateMobNum= /^\d*(?:\.\d{1,2})?$/;
if (validateMobNum.test(mobileNum ) && mobileNum.length == 10) {
    alert("Valid Mobile Number");
}
else {
    alert("Invalid Mobile Number");
}

1
投票

试试这个代码。它包含手机的十位数字验证:

<!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>

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
投票

使用正则表达式对手机号码进行 Jquery 验证

验证包括:

  1. 只有 10 位数字(没有字母和特殊字符)

  2. 数字从6,7,8,9开始

    <html>
    <body>
    <label>Mobile Number:</label>
    <input type="text" class="form-control mobile-valid">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function() {
    $('.mobile-valid').on('keypress', function(e) {
     var $this = $(this);
     var regex = new RegExp("^[0-9\b]+$");
     var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
     // for 10 digit number only
     if ($this.val().length > 9) {
        e.preventDefault();
        return false;
      }
      if (e.charCode < 54 && e.charCode > 47) {
          if ($this.val().length == 0) {
            e.preventDefault();
            return false;
          } else {
            return true;
          }
      }
      if (regex.test(str)) {
        return true;
      }
      e.preventDefault();
      return false;
      });
    });
    </script>  
    </body>
    </html>
    

演示点击这里


0
投票

这是验证您的手机号码格式的代码。这个函数返回一个布尔值。

function isValidMobileNumber(mobileNumber) {
  var mobileNumberPattern = /^[0-9]{10}$/;
  return mobileNumberPattern.test(mobileNumber);
}

if(isValidMobileNumber()){
//Valid mobile number format.
}else{
//Invalid mobile number format. 
}


-1
投票
var pattern= /^[0]*(\d{9})*\s*$/;

仅使用此模式来验证斯里兰卡号码。在上面的代码行中只验证以 0.

开头的手机号码
© www.soinside.com 2019 - 2024. All rights reserved.