发送短信倒计时(附带数据验证)##干货

/*获取验证码*/
     $("#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)
    }
  }

页面结构

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

 

posted on 2018-04-18 13:22  Happy丶Liu  阅读(239)  评论(0编辑  收藏  举报

导航