效果如下:
<p class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <p class="form-list"> <label class="register-label">手機(jī)號(hào)碼</label> <input class="regphone input-register" type="text" name="phone" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" /> </p> <p class="form-list"> <label class="register-label">驗(yàn)證碼</label> <input class="input-short" type="text" name="sms_salt" placeholder="請(qǐng)輸短信驗(yàn)證碼" /> <input class="input-code" id="btn" type="button" value="發(fā)送驗(yàn)證碼" /> </p> <input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" /> </form> </p>
這里的驗(yàn)證碼是通過(guò)向后臺(tái)這個(gè)url({{ path(‘zm_member_get_salt') }}))里面,傳手機(jī)號(hào)碼和類(lèi)型(type=1為注冊(cè))這兩個(gè)值,后臺(tái)接收值成功則返回成功狀態(tài)值。
基于這里,實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí),即可以在判斷成功后。調(diào)用封裝了的倒計(jì)時(shí)函數(shù) time(),注意驗(yàn)證碼應(yīng)使用type為button的input,此時(shí)可以方便地更改其value值,來(lái)展示倒計(jì)時(shí)的時(shí)間。
<script type="text/javascript"> //倒計(jì)時(shí)60秒 var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="獲取動(dòng)態(tài)碼"; wait = 60; } else { o.setAttribute("disabled", true); o.value="重新發(fā)送(" + 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>
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com