JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能

更新時間：2016年10月27日 10:10:55 作者：IT985博客

在用戶注冊時，通常需要短信驗證碼，而且為了交互效果，也需要增加倒計時。該如何實現(xiàn)獲取驗證碼倒計時功能呢？下面小編給大家分享JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時的代碼，一起看看吧

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

效果如下：

<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="發(fā)送驗證碼" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</div>

這里的驗證碼是通過向后臺這個url({{ path(‘zm_member_get_salt') }}))里面，傳手機號碼和類型（type=1為注冊）這兩個值，后臺接收值成功則返回成功狀態(tài)值。

基于這里，實現(xiàn)驗證碼倒計時，即可以在判斷成功后。調(diào)用封裝了的倒計時函數(shù) time()，注意驗證碼應使用type為button的input，此時可以方便地更改其value值，來展示倒計時的時間。

<script type="text/javascript">
//倒計時60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="獲取動態(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>

以上所述是小編給大家介紹的JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持

您可能感興趣的文章: