發送短信倒計時(附帶數據驗證)##乾貨

/*獲取驗證碼*/
     $("#sendcode").click(function() {
//         alert(1)
    var number = $('#tel').val();
    var data = {
      'mobile': number,
      'aim': 1
    };
    if(data.mobile == "" || data.mobile.length != 11) {
      //        alert("請輸入手機號")

    } else {
//    console.log(data);
      $.ajax({
        type: "post",
        url: "接口",
        async: true,
        dataType: 'json',
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function(data) {
          console.log(data);

          //倒計時    
          var o = $("#sendcode");
          if(data.result.statusCode == 2999) {
            locktime(o);
          } else
          if(data.result.statusCode == 0) {
            time(o);
          } else {
            $("#error").html("手機號已被註冊");
          }
     

        }

      });
    }
  })
  var wait = 60;

  function time(o) {
    if(wait == 0) {
      o.removeAttr("disabled");
      o.val("發送短信驗證");
      wait = 60;
    } else {
      o.attr("disabled", true);
      o.val("從新發送(" + wait + ")");
      wait--;
      setTimeout(function() {
          time(o)
        },
        1000)
   }
  }
  
   var locks = 5;

  function locktime(o) {
    if(locks == 0) {
      o.removeAttr("disabled");
      o.val("發送短信驗證");
      locks = 5;
    } else {
      o.attr("disabled", true);
      o.val("賬號已被鎖定(" + locks + ")");
      locks--;
      setTimeout(function() {
          locktime(o)
        },
        1000)
    }
  }

頁面結構html

<div class="main-content" style="">
      <div class="warp">

        <div class="regist">
          <h2>註冊</h2>
          <form id="registForm">
            <div class="form-cont">
              <input class="isMobilePhone" id="mobile" name="mobile" type="tel" placeholder="請輸入手機號" required/>
            </div>
            <div id="errorMassage" class="error-massage"></div>
            <div class="form-cont clearfix">
              <input class="vCode" name="vCode" type="text" placeholder="請輸入驗證碼" required/><input id="getVcode" class="btn" type="button" value="獲取驗證碼" />
            </div>
            <div class="form-cont">
              <input id="password" name="password" type="password" placeholder="設置密碼" required/>
            </div>
            <!--密碼複雜度-->
            <div class="check-password">
              <span>簡單</span><span>通常</span><span>複雜</span>
            </div>
            <div class="form-cont">
              <input name="lastPassword" type="password" placeholder="確認密碼" required/>
            </div>
            <div class="form-cont">
              <label id="agreement" class="selected-bg" for="che"><input id="che" class="che" type="checkbox" checked="checked" /></label><span>我已閱讀並接受 <a id="protocol" href="">《隱私與服務協議》</a></span>
            </div>
            <div>
              <input id="sunminBtn" class="register-btn" type="button" value="當即註冊" />
            </div>
          </form>
        </div>

        <div class="imgdown">
          <img src="img/iconbar.png" />
        </div>
      </div>
    </div>
相關文章
相關標籤/搜索