cari

Rumah >hujung hadapan web >tutorial js >Jquery menyemak sama ada nombor telefon bimbit mematuhi peraturan dan menetapkan butang serah kepada keadaan berbeza berdasarkan hasil pengesanan nombor telefon bimbit_jquery

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

WBOY
WBOYasal
2016-05-16 15:29:331684semak imbas

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>

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;     //返回一个错误，不向下执行
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Laksanakan kesan tatal skrin penuh berdasarkan kemahiran jquery_javascriptArtikel seterusnya：Laksanakan kesan tatal skrin penuh berdasarkan kemahiran jquery_javascript

Artikel berkaitan

Lihat lagi