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

相关文章

  • p5.js绘制创意自画像

    p5.js绘制创意自画像

    这篇文章主要为大家详细介绍了p5.js绘制创意自画像,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 无阻塞加载脚本分析[全]

    无阻塞加载脚本分析[全]

    script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。
    2011-01-01
  • javascript 网站常用的iframe分割

    javascript 网站常用的iframe分割

    就是一个页面使用两个iframe来调用内容,实现页面导航,更容易控制,可控制性好
    2008-06-06
  • js实现上传图片功能

    js实现上传图片功能

    这篇文章主要为大家详细介绍了js实现上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • js实现简单的二级联动效果

    js实现简单的二级联动效果

    本文主要介绍了js实现简单的二级联动效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • ES6新特性之字符串的扩展实例分析

    ES6新特性之字符串的扩展实例分析

    这篇文章主要介绍了ES6新特性之字符串的扩展,结合实例形式对比分析了ES5与ES6字符串函数以及模板字符串相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • Promise.all中对于reject的处理方法

    Promise.all中对于reject的处理方法

    这篇文章主要介绍了Promise.all中对于reject的处理方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • xml分页+ajax请求数据源+dom取结果实例代码

    xml分页+ajax请求数据源+dom取结果实例代码

    最近做的一个项目里的某个小功能,主要是为了方便选择数据 演示地址:由于有恶意程序,所以去掉地址
    2008-10-10
  • 详解 Map 和 WeakMap 区别以及使用场景

    详解 Map 和 WeakMap 区别以及使用场景

    这篇文章主要介绍了详解 Map 和 WeakMap 区别以及使用场景,Map本质上是一个键值对的集合,WeakMap 只能将对象作为键名,下面来一起俩姐更多详细内容吧,希望这一篇文章能让你对 Map 有更好的理解,或者能够帮你理解 Map 和 WeakMap
    2022-01-01
  • JS 清除字符串数组中,重复元素的实现方法

    JS 清除字符串数组中,重复元素的实现方法

    下面小编就为大家带来一篇JS 清除字符串数组中,重复元素的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论