在用戶注冊時,通常需要短信驗證碼,而且為了交互效果,也需要增加倒計時。
效果如下:

<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實現用戶注冊時獲取短信驗證碼和倒計時功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持
新聞熱點
疑難解答