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

在用戶注冊時(shí)，通常需要短信驗(yàn)證碼，而且為了交互效果，也需要增加倒計(jì)時(shí)。

效果如下：

<div class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<div class="form-list">
<label class="register-label">手機(jī)號碼</label>
<input class="regphone input-register" type="text" name="phone" placeholder="請輸入手機(jī)號碼" />
</div>
<div class="form-list">
<label class="register-label">驗(yàn)證碼</label>
<input class="input-short" type="text" name="sms_salt" placeholder="請輸短信驗(yàn)證碼" />
<input class="input-code" id="btn" type="button" value="發(fā)送驗(yàn)證碼" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</div>

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

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

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

您可能感興趣的文章: