JS實現用戶註冊時獲取簡訊驗證碼和倒數功能的範例程式碼分享

在用戶註冊時，通常需要簡訊驗證碼，而且為了互動效果，也需要增加倒數計時。

效果如下：

<p class="user-form">
<form action="{{ path(&#39;zm_member_register&#39;) }}" method="post">
<p class="form-list">
<label class="register-label">手机号码</label>
<input class="regphone input-register" type="text" name="phone" placeholder="请输入手机号码" />
</p>
<p 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="发送验证码" />
</p>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</p>

這裡的驗證碼是透過向後台這個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)
}
}
$(&#39;.input-code&#39;).click(function() {
var phone = $(&#39;.regphone&#39;).val();
$.ajax({
type: &#39;post&#39;,
url: "{{ path(&#39;zm_member_get_salt&#39;) }}",
data: {
phone: phone,
type: 1
},
dataType: &#39;json&#39;,
success: function (result) {
if (result.flag == 1) {
// alert(&#39;成功&#39;);
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

  以上就是JS實現用戶註冊時獲取簡訊驗證碼和倒數功能的範例程式碼分享的內容，更多相關內容請關注PHP中文網（www.php.cn）！