在用户注册时，通常需要短信验证码，而且为了交互效果，也需要增加倒计时。该如何实现获取验证码倒计时功能呢？下面小编给大家分享JS实现用户注册时获取短信验证码和倒计时的代码，一起看看吧
在用户注册时，通常需要短信验证码，而且为了交互效果，也需要增加倒计时。
效果如下：
<div> <form action="{{ path('zm_member_register') }}" method="post"> <div> <label>手机号码</label> <input type="text" placeholder="请输入手机号码" /> </div> <div> <label>验证码</label> <input type="text" placeholder="请输短信验证码" /> <input type="button" value="发送验证码" /> </div> <input type="submit" 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实现用户注册时获取短信验证码和倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持
您可能感兴趣的文章: