前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >发送短信倒计时(附带数据验证)##干货

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

作者头像
Happy、Liu
发布2019-04-24 16:24:48
6470
发布2019-04-24 16:24:48
举报
文章被收录于专栏:技术由浅入深技术由浅入深
代码语言:javascript
复制
/*获取验证码*/
     $("#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)
    }
  }

页面结构

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-04-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档