suchen

Heim  >  Artikel  >  Web-Frontend  >  Jquery prüft, ob die Mobiltelefonnummer den Regeln entspricht, und setzt die Schaltfläche „Senden“ basierend auf den Ergebnissen der Mobiltelefonnummernerkennung_jquery auf unterschiedliche Zustände

Jquery prüft, ob die Mobiltelefonnummer den Regeln entspricht, und setzt die Schaltfläche „Senden“ basierend auf den Ergebnissen der Mobiltelefonnummernerkennung_jquery auf unterschiedliche Zustände

WBOY
WBOYOriginal
2016-05-16 15:29:331652Durchsuche

Projektanforderungen:

Geben Sie die Mobiltelefonnummer ein und stellen Sie in Echtzeit fest, ob die eingegebene Mobiltelefonnummer den Regeln entspricht:

Wenn die Regeln nicht eingehalten werden, ist die Schaltfläche „Senden“ deaktiviert, die Informationen zur Mobiltelefonnummer können nicht übermittelt werden und die Schaltfläche wird mit einem grauen Hintergrund angezeigt

Wenn es den Regeln entspricht, können Sie die eingegebenen Mobiltelefonnummerninformationen übermitteln und den Hintergrund der Schaltfläche auf Rot setzen.

Der Code lautet wie folgt: 

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

Wenn die vom Benutzer eingegebene Mobiltelefonnummer nicht den Regeln entspricht:

Wenn die vom Benutzer eingegebene Mobiltelefonnummer den Regeln entspricht:

ps:jquery-Verifizierungstelefonnummer 

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;     //返回一个错误，不向下执行
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementieren Sie einen Vollbild-Bildlaufeffekt basierend auf jquery_javascript-KenntnissenNächster Artikel：Implementieren Sie einen Vollbild-Bildlaufeffekt basierend auf jquery_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen