专栏首页技术由浅入深发送短信倒计时(附带数据验证)##干货

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从0开始的Python学习014面向对象编程

    到目前为止,我们的编程都是根据数据的函数和语句块来设计的,面向过程的编程。还有一种我们将数据和功能结合起来使用对象的形式,使用它里面的数据和方法这种方法叫做面向...

    Happy、Liu
  • 从0开始的Python学习018更多的Python内容

    之前学习的都是一些常用的方法,为了使我们的学习更加的完整,我们在这里学习一些特殊的方法。

    Happy、Liu
  • Navicat Premium 连接oracle ORA-01017:用户名/口令无效;登陆被拒绝

    Happy、Liu
  • PHP实现新型冠状病毒疫情实时图的实例

    砸漏
  • 一篇文带你从0到1了解建站及完成CMS系统编写

    文章为从0到1了解内容管理系统搭建与编写,由于一篇文章内容篇幅过长,文章内容经过压缩,该项目中相同逻辑的实现只以一个实例作为描述,主要以核心关键功能的开发作为主...

    公众号 碧油鸡
  • python flask 的分页使用

    flask-sqlalchemy 的分页参考文档 http://www.pythondoc.com/flask-sqlalchemy/api.html#id1

    py3study
  • Jump Start Bootstrap 第4章

    JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

    Remember_Ray
  • HTML炫酷PJAX引导单页

    官方演示: https://dwq.im 本地演示版本: https://www.weidro.cn 来源: https://dwq.im

    AlexTao
  • 基于web页面开发串口程序界面---html代码

    MiaoGIS
  • php无限级分类实现评论及回复功能

    经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,...

    砸漏

扫码关注云+社区

领取腾讯云代金券