时间:2021-05-26
在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。
效果如下:
<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实现用户注册时获取短信验证码和倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
目前越来越多的app在注册或是进行对应操作时,要求获取短信验证码,在点击了获取短信验证码的按钮后,就是出现倒计时,比如倒计时120S,在倒计时期间内,按钮背景变
相关阅读:基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂。具体代
一、简介:开发中在用户注册或找回密码之类的功能,经常会遇到获取短信验证码,获取验证码后需要等待1分钟倒计时,这段时间是不能再次发送短信请求的。效果图:二、实现步
本文实例讲述了js实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考,具体如下:js-手机发送短信倒计时button{width:100px;heig
1、功能描述 当用户想要获取验证码时,就点击免费获取验证码,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发