专栏首页闻道于事短信接口发送验证码倒计时以及提交验证

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

项目中找回密码的功能:

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

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

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

前端代码:

表单部分:

<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 条评论
登录 后参与评论

相关文章

  • JFinal极速开发框架使用笔记(二) 两个问题,一个发现

    最近给新人出了一个小测试,我也用JFinal框架做了一下,记录一下使用过程中遇到的坑和新学到的知识点 首先是遇到的两个小问题, 一个是用最新版的eclipse运...

    二十三年蝉
  • CSS样式表基础

    层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

    二十三年蝉
  • js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:       <form id="uploadForm" method="pos...

    二十三年蝉
  • Layui form 表单(常用)

    layui-form div.layui-form-item label.layui-form-label div.layui-input-block

    用户5760343
  • Django+xadmin打造在线教育平台(九)

    代码 github下载 十二、首页和全局404,500配置 12.1.首页功能 Course添加一个字段 is_banner = models.Boolean...

    zhang_derek
  • 框架篇-Django博客应用-添加样式

    <input type="text" name="username" maxlength="254" id="id_username">

    小团子
  • 代码开源,音乐无价,GitHub 上这几个高颜值音乐播放器你值得拥有!

    音乐,作为程序员日常不可或缺的精神食粮,能稳定你改 Bug 时那颗焦躁不安的心,亦能提升你的编码效率。

    GitHubDaily
  • 使用python cgi上传文件并计算m

    对文件拷贝后进行MD5值比较,看是不是拷贝完全。google和baidu上都是使用md5模块读取所有的文件进内存,在计算md5,导致计算超过1G大小的文件报错。...

    py3study
  • 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    在上篇《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括,包括总体界面...

    MonroeCode
  • 重置密码

    当用户不小心忘记了密码时,网站需要提供让用户找回账户密码的功能。在示例项目中,我们将发送一封含有重置用户密码链接的邮件到用户注册时的邮箱,用户点击收到的链接就可...

    追梦人物

扫码关注云+社区

领取腾讯云代金券