专栏首页编程微刊验证码倒计时的注册页面

验证码倒计时的注册页面

原型图

需求:手机号验证 发送验证码之后开始60S倒计时 60s以后如果没有填写验证码,可重新发送

<!doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <title>注册</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <meta name="format-detection" content="telephone=no">
            <meta name="renderer" content="webkit">
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <script src="http://code.jquery.com/jquery-latest.js";></script>
      </head>
      <body>
            <input type="text" id="phone" class="am-form-field  my-radius" placeholder="请输入手机号" style="">
            <div style="height:2rem;">
                  <font id="errMsg1" color="red" style=""></font>
            </div>
            <div>
                  <input id="rpcode" type="text" placeholder="请输入验证码">
                  <input id="getCode" type="button" value="获取验证码" onclick="sendMessages()"></input>
                  <font id="errMsg2" color="red" style="display:none; position:absolution; top:2rem;"></font>
            </div>
            <p id="start">
                  <span>开始</span>
            </p>
            <!-- 保存验证码  -->
            <input type="text" id="code" hidden="true">
            <script>
                  var InterValObj; //timer变量,控制时间 
                  var count = 60; //间隔函数,1秒执行 
                  var curCount; //当前剩余秒数 
                  var code = ""; //验证码 
                  var codeLength = 6; //验证码长度 
                  function sendMessages() {
                        curCount = count;
                        var phone = $("#phone").val()
                        if(validatePhone(phone)) {
                              return;
                        }
                        if(phone != "") {
                              //设置button效果,开始计时 
                              $("#getCode").attr("disabled", "true");
                              $("#getCode").val("请在" + curCount + "秒内输入");
                              InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器,1秒执行一次 
                              //向后台发送处理数据 
                              $.ajax({
                                    url: "getCode.action",
                                    dataType: "json",
                                    type: "get",
                                    data: "phone=" + phone,
                                    success: function(data) {
                                          //保存验证码
                                          $("#code").val(data);
                                    }
                              });
                        } else {
                              alert("手机号码不能为空!!!!!!");
                        }
                  }
                  //timer处理函数 
                  function SetRemainTimes() {
                        if(curCount == 0) {
                              window.clearInterval(InterValObj); //停止计时器 
                              $("#getCode").removeAttr("disabled"); //启用按钮 
                              $("#getCode").val("重新发送验证码");
                              code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效     
                        } else {
                              curCount--;
                              $("#getCode").val("请在" + curCount + "秒内输入");
                        }
                  }
                  //开始按钮点击事件
                  $("#start").click(function() {
                        window.location.href = "regafter.html?phone=" + $("#phone").val();
                  })
                  //验证手机号
                  function validatePhone(phone) {
                        if(phone == '') {
                              $("#errMsg1").html("&nbsp;&nbsp;&nbsp;&nbsp;请先填写手机号");
                              $("#errMsg1").show();
                              return true;
                        }
                        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                        if(!myreg.test(phone)) {
                              $("#errMsg1").html("&nbsp;&nbsp;&nbsp;&nbsp;请输入有效的手机号");
                              $("#errMsg1").show();
                              return true;
                        }
                        return false;
                  }
                  //验证码非空和错误验证
                  function validateCode() {
                        var phone = $("#phone").val();
                        var code = $("#code").val();
                        var rpcode = $("#rpcode").val();
                        if(validatePhone(phone)) {
                              return true;
                        }
                        if(code == '') {
                              $("#errMsg2").html("&nbsp;&nbsp;&nbsp;&nbsp;请先获取验证码");
                              $("#errMsg2").show();
                              return true;
                        }
                        if(rpcode == '' || code != rpcode) {
                              $("#errMsg2").html("&nbsp;&nbsp;&nbsp;&nbsp;请正确输入验证码");
                              $("#errMsg2").show();
                              return true;
                        }
                        alert(code != rpcode);
                        return false;
                  }
                  $("#phone").on("focus", function() {
                        $("#errMsg1").hide();
                  })
                  $("#rpcode").on("focus", function() {
                        $("#errMsg2").hide();
                  })
            </script>
      </body>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • eclipse里面如何查看svn提交记录日志

    1:在菜单栏处找到“Window” 找到“Show View” 找到“Other”,点击打开“Other”

    祈澈菇凉
  • uniapp获取接口数据,渲染在picker选择器里面

    2:选择一个比较好用的ui框架 引入之后,很多代码样式都不需要自己一点点的写了,需要什么样的,直接在UI库里面复制黏贴就行 ,省了很多时间哦,不许呀考虑写出来...

    祈澈菇凉
  • eclipse项目报错的解决方案

    有时候从svn上面拉下来项目之后,会出现在错误,项目文件夹上有红色的叉号,这个时候,需要绑定jdk

    祈澈菇凉
  • NIO 服务端TCP连接管理的方案

       因为服务端与客户端实现的是长连接,所以需要对客户端的连接情况进行监控,防止无效连接占用资源。

    Rekent
  • Demuxed 2019 演讲视频选(十)

    第一场演讲的演讲者是来自Eluvio的Michelle Munson,演讲主题是”Streaming a Premium Content Library on ...

    用户1324186
  • 来不及了快上车,老司机带你十分钟看完MWC 2017

    VRPinea
  • mysql存储过程之游标

     大多数SQL语句都是针对一个或多个表的单条语句。并非所有的操作都怎么简单。经常会有一个完整的操作需要多条才能完成

    陈灬大灬海
  • 采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延伸系列2)

    前言 今天我们来讲讲EntityFramework.Extended 首先科普一下这个EntityFramework.Extended是什么,如下: 这是一个对...

    GuZhenYin
  • 后台OData model data查看工具

    Jerry has written this tool for support colleague in Zeiss to enable them to con...

    Jerry Wang
  • fatal error: Python.

    py3study

扫码关注云+社区

领取腾讯云代金券