短信接口发送验证码倒计时以及提交验证

项目中找回密码的功能:

忘记密码,登录页面点击忘记密码,跳转页面输入用户名,如果用户名已经绑定手机号,后台调用短信接口给该用户绑定的手机发送短信,如果没有绑定手机号则给出提示

同时,发送验证码按钮出现倒计时并不可点击

用户接收到验证码后,输入验证码并提交,如果验证码正确,跳转到修改密码页面,如果验证码不正确,跳转到错误页面。

前端代码:

表单部分:

<form id="phoneform" class="layui-form" style="margin-top:10%;margin-left:30%;
background-color:white;
    height: 180px;
    width:400px;
    padding: 50px;
    border-radius:15px;" method="post"  action="<%=basePath%>/personal/msg/findphonepnum">
  
  <div class="layui-form-item">
    <label class="layui-form-label">用户名:</label>
    <div class="layui-input-block">
      <input id="username" type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
   
    </div>
    <div id="msg" style="margin-left: 40px"></div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">验证码:</label>
    <div class="layui-input-block">
      <input id="pnum" type="text" name="pnum" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
   
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      
      <input type="button" class="layui-btn" id="find"  value="点击获取验证码" /> 
      <button class="layui-btn" lay-submit=""   lay-filter="demo2">提交</button>
    </div>
  </div>
</form>

js部分,ajax,倒计时:

<script>
layui.use(['form', 'layedit', 'laydate','layer'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  $("#find").click(function() {
      if($("#username").val()==''){
          layer.msg("请填写正确用户名");
          return false;
      }
      var obj=this;
      $.ajax({
          type:"post",
          url:"<%=basePath%>/personal/msg/findphone",
          data:{
              username:$("#username").val(),
          },
          dataType:"json",//返回的
          success:function(data) {
              
              if(data.result){
                  $("#find").addClass(" layui-btn-disabled");
                  $('#find').attr('disabled',"true");
                  settime(obj);
                  $("#msg").text(data.msg);
              }else{
                  layer.msg(data.msg);
              }
          },
          error:function(msg) {
              console.log(msg);
          }
      }); 
  });
});
</script>
<script type="text/javascript"> 
var countdown=120; 
function settime(obj) { 
if (countdown == 0) { 
    obj.removeAttribute("disabled"); 
    obj.classList.remove("layui-btn-disabled")
    obj.value="获取验证码"; 
    countdown = 60; 
    return;
} else { 
    
    obj.value="重新发送(" + countdown + ")"; 
    countdown--; 
} 
setTimeout(function() { 
    settime(obj) }
    ,1000) 
}
</script>

这里遇到了一个问题,关于按钮变色不可点击以及倒计时显示,因为本人也是刚开始做java没多久,js功底一般,所以这个倒计时代码时从网上找的,然后在和ajx结合时,获取当前对象出了点问题,因为如果放ajax前面,就算发送验证按失败也会显示倒计时,如果放在ajax里面,用无法获取到该按钮对象。我尝试过在ajax里面用 $('#find') 传到函数里,也是不行的。后来在ajax前先用  var obj=this;  ajax返回成功自后在调用倒计时函数就可以了。

重点是发送代码后的按钮变化和提示以及倒计时。

后端代码:

主要是调用短信接口发送验证码以及用户提交验证码的验证。

在我的另一篇博客里面:

http://www.cnblogs.com/jiangwz/p/8093389.html

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏野路子程序员

给网站配置上HTTPS加密访问(Centos7+Apache+SSL证书)

90850
来自专栏云计算教程系列

如何在Ubuntu 16.04中为Nginx创建自签名SSL证书

TLS或称传输层安全性,及其前身SSL(代表安全套接字层)是用于将正常流量包装在受保护的加密包装中的Web协议。

55100
来自专栏张戈的专栏

Linux+Nginx/Apache/Tomcat新增SSL证书,开启https访问教程

上上篇文章《nginx 平滑升级&新增模块》提到了公司的 https 访问需求。当我新增了 SSL 模块之后,却发现以前还真没部署过 https 访问。 下面整...

1K70
来自专栏腾讯云TStack专栏

k8s如何加入TLS安全访问,技术发烧友为你探路

作者简介 ? ? 以前外部访问k8s里的服务,都是直接以http方式进行的,缺少TLS安全,今天给大家详细分析一下怎么为k8s加TLS安全访问。 生成并信任自...

60860
来自专栏康怀帅的专栏

VirtualBox 常用配置

本文列举了 VirtualBox 常用配置。 压缩虚拟磁盘体积 碎片整理 $ sudo dd if=/dev/zero of=/EMPTY bs=1M $ su...

31260
来自专栏程序猿

SSL 证书部署过程

本文演示环境 操作系统(64位):Ubuntu 16.04 CentOS 7.3 服务器软件:Nginx和Apache SSL证书:DV SSL 域名:19...

1.5K60
来自专栏云计算教程系列

如何使用CentOS 7上的Let's Encrypt来保护Nginx

Let's Encrypt是一个新的证书颁发机构(CA),它提供了一种获取和安装免费TLS / SSL证书的简便方法,从而在Web服务器上启用加密的HTTPS。...

21900
来自专栏Golang语言社区

Go代码打通HTTPs

TL;DR 手工创建CA证书链,手写代码打通HTTPs的两端 HTTPs最近是一个重要的话题,同时也是一个有点难懂的话题。所以网上有大量的HTTPs/TLS/S...

40840
来自专栏比原链

Bytomd 助记词恢复密钥体验指南

Gitee地址:https://gitee.com/BytomBlockchain/bytom

16120
来自专栏FreeBuf

Apache shiro 1.2.4版本远程命令执行漏洞详解

*本文原创作者:zhujunboabc,本文属FreeBuf原创奖励计划,未经许可禁止转载 搜了一下,发现网上关于apache shiro 1.2.4版本的漏洞...

38150

扫码关注云+社区

领取腾讯云代金券