JS实现用户注册时获取短信验证码和倒计时功能

 更新时间:2016年10月27日 10:10:55   作者:IT985博客  
在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。该如何实现获取验证码倒计时功能呢?下面小编给大家分享JS实现用户注册时获取短信验证码和倒计时的代码,一起看看吧

在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。

效果如下:

<div class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<div class="form-list">
<label class="register-label">手机号码</label>
<input class="regphone input-register" type="text" name="phone" placeholder="请输入手机号码" />
</div>
<div class="form-list">
<label class="register-label">验证码</label>
<input class="input-short" type="text" name="sms_salt" placeholder="请输短信验证码" />
<input class="input-code" id="btn" type="button" value="发送验证码" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</div>

这里的验证码是通过向后台这个url({{ path(‘zm_member_get_salt') }}))里面,传手机号码和类型(type=1为注册)这两个值,后台接收值成功则返回成功状态值。

基于这里,实现验证码倒计时,即可以在判断成功后。调用封装了的倒计时函数 time(),注意验证码应使用type为button的input,此时可以方便地更改其value值,来展示倒计时的时间。

<script type="text/javascript">
//倒计时60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取动态码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
$('.input-code').click(function() {
var phone = $('.regphone').val();
$.ajax({
type: 'post',
url: "{{ path('zm_member_get_salt') }}",
data: {
phone: phone,
type: 1
},
dataType: 'json',
success: function (result) {
if (result.flag == 1) {
// alert('成功');
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

以上所述是小编给大家介绍的JS实现用户注册时获取短信验证码和倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持

相关文章

  • JavaScript数学对象(Math)方法举例详解

    JavaScript数学对象(Math)方法举例详解

    这篇文章主要给大家介绍了关于JavaScript数学对象(Math)方法的相关资料,Math(数学)对象的作用是执行普通的算数任务,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • PHP实现记录代码运行时间封装类实例教程

    PHP实现记录代码运行时间封装类实例教程

    这篇文章主要给大家介绍了利用PHP实现记录代码运行时间的封装类的相关教程,文中给出了详细的示例代码供大家参考学习,需要的朋友可以参考下
    2017-05-05
  • JS 数组和对象的深拷贝操作示例

    JS 数组和对象的深拷贝操作示例

    这篇文章主要介绍了JS 数组和对象的深拷贝操作,结合实例形式分析了JS 数组和对象的深拷贝基本原理与操作技巧,需要的朋友可以参考下
    2020-06-06
  • 解决layui数据表格table的横向滚动条显示问题

    解决layui数据表格table的横向滚动条显示问题

    今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • ECharts两种动画效果完整代码

    ECharts两种动画效果完整代码

    这篇文章主要给大家介绍了关于ECharts两种动画效果的相关资料,在做项目时当我们用到echarts图表时,大部分产品经理都会要求我们给图表加上一些动画效果,让页面看起来更加炫酷,需要的朋友可以参考下
    2023-07-07
  • javascript对下拉列表框(select)的操作实例讲解

    javascript对下拉列表框(select)的操作实例讲解

    这篇文章主要介绍了javascript对下拉列表框(select)的操作。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 原生JS无缝滑动轮播图

    原生JS无缝滑动轮播图

    这篇文章主要为大家详细介绍了原生JS实现淡出淡入轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 微信小程序实现下拉筛选功能

    微信小程序实现下拉筛选功能

    这篇文章主要为大家详细介绍了微信小程序实现下拉筛选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • SharedWorker 多页面相互通信示例详解

    SharedWorker 多页面相互通信示例详解

    这篇文章主要为大家介绍了SharedWorker 多页面相互通信示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 移动端触屏幻灯片图片切换插件idangerous swiper.js

    移动端触屏幻灯片图片切换插件idangerous swiper.js

    这篇文章主要为大家详细介绍了移动端触屏幻灯片图片切换插件idangerous swiper.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04

最新评论