Jquery menyemak sama ada nombor telefon bimbit mematuhi peraturan dan menetapkan butang serah kepada keadaan berbeza berdasarkan hasil pengesanan nombor telefon bimbit

Jquery menyemak sama ada nombor telefon bimbit mematuhi peraturan dan menetapkan butang serah kepada keadaan berbeza berdasarkan hasil pengesanan nombor telefon bimbit_jquery

WBOY

Lepaskan： 2016-05-16 15:29:33

asal

1657 orang telah melayarinya

Keperluan projek:

Masukkan nombor telefon bimbit dan tentukan sama ada nombor telefon bimbit yang dimasukkan mematuhi peraturan dalam masa nyata:

Jika ia tidak mematuhi peraturan, butang hantar dilumpuhkan, maklumat nombor telefon mudah alih tidak boleh diserahkan dan butang itu memaparkan latar belakang kelabu

Jika ia memenuhi peraturan, anda boleh menyerahkan maklumat nombor telefon mudah alih yang dimasukkan dan menetapkan latar belakang butang kepada merah.

Kod adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 400px;
      margin: 50px auto;
      border: 1px solid #ccc;
      padding: 50px;
    }
    #phone{
      text-align: center;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      color: #333;
    }
    .submit,
    .disable,
    #phone{
      display: block;
      width: 190px;
      height: 35px;
      border-radius: 5px;
      margin-left:auto;
      margin-right:auto;
    }
    .disable{
      border: none;
      background-color: #ccc;
      color: #fff;
    }
    .submit{
      border: none;
      background-color: red;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="box">
    <input id="phone" type="text" placeholder="输入领券手机号" maxlength="11">
    <button id="submit" class="disable" disabled>确认领取</button>
  </div>
  <script src="jquery.min.js"></script>
  <script>
    $(function () {
      var $phone = $('#phone');
      var $submit = $('#submit');
      $phone.on('input propertychange', function () {
        var phone = this.value;
        if (/^((13[0-9]|15[0-9]|17[0-9]|18[0-9])+\d{8})$/.test(phone)) {
          $submit.removeClass('disable').addClass('submit').removeAttr('disabled');
        } else {
          $submit.removeClass('submit').addClass('disable').attr('disabled', 'disabled');
        }
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Kesan:

Apabila nombor telefon bimbit yang dimasukkan oleh pengguna tidak mematuhi peraturan:

Apabila nombor telefon bimbit yang dimasukkan oleh pengguna mematuhi peraturan:

ps: nombor telefon pengesahan jquery

var isMobile=/^(&#63;:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/; //手机号码验证规则
var isPhone=/^((0\d{2,3})-)&#63;(\d{7,8})(-(\d{3,}))&#63;$/;  //座机验证规则
var dianhua = $("#dianhua").val();          //获得用户填写的号码值 赋值给变量dianhua
if(！isMobile.test(dianhua) && !isPhone.test(dianhua)){ //如果用户输入的值不同时满足手机号和座机号的正则
  alert("请正确填写电话号码，例如:13415764179或0321-4816048"); //就弹出提示信息
  $("#dianhua").focus();    //输入框获得光标
  return false;     //返回一个错误，不向下执行

Salin selepas log masuk