短信接口发送验证码倒计时以及提交验证
时间:2022-04-29
本文章向大家介绍短信接口发送验证码倒计时以及提交验证,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
项目中找回密码的功能:
忘记密码,登录页面点击忘记密码,跳转页面输入用户名,如果用户名已经绑定手机号,后台调用短信接口给该用户绑定的手机发送短信,如果没有绑定手机号则给出提示
同时,发送验证码按钮出现倒计时并不可点击
用户接收到验证码后,输入验证码并提交,如果验证码正确,跳转到修改密码页面,如果验证码不正确,跳转到错误页面。
前端代码:
表单部分:
<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
- android 实现倒影
- InvokeHelper类
- Android官方支持百分比设置宽和高的控件及示例
- Extjs radio布局--横向排列
- 第六章 正则表达式的构建
- android 自定义相机
- Android学习第六弹之 Android字体大小自适应不同分辨率的方法
- 仿12306查询火车票功能
- Spring Boot开发Web应用
- C#/.NET RestSharp网络组件实现上传文件到远程服务器【可跨域传文件】
- android 自定义gallerey并实现预览功能
- Android学习第五弹之Matrix的用法
- 推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput
- Android新组件RecyclerView介绍,其效率更好
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- vue-element-admin提交表单数据到后端
- JDK15正式发布,划时代的ZGC同时宣布转正
- Redis的各种数据类型实践---List结构
- Git分支操作方法
- 最全解密微信红包随机算法(含代码实现)
- 两次死锁的分析
- 一次解决你的图像尺寸和定位问题。
- vuedraggable实现列表拖动排序
- 在 Xcode 中添加 Swift package 依赖
- 浅谈JavaScript中的apply,call和bind
- Git 的简单使用
- 移动端适配
- 《Algorithms Unlocked》读书笔记1——循环和递归
- 《Algorithms Unlocked》读书笔记2——二分查找和排序算法
- 《Algorithms Unlocked》读书笔记3——计数排序