DIV CSS 佈局教程網

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

效果如下：

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