JS implementation of sample code sharing for obtaining SMS verification code and countdown function when user registers

When users register, a text message verification code is usually required, and for the interactive effect, a countdown also needs to be added.

The effect is as follows:

<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>

The verification code here is to pass the mobile phone number and type (type=1 for registration) to the background url ({{ path('zm_member_get_salt') }})) value, if the value is received successfully in the background, the success status value will be returned.

Based on this, the verification code countdown is implemented, that is, after the judgment is successful. Call the encapsulated countdown function time(). Note that the verification code should use input of type button. At this time, you can easily change its value to display the countdown time.

<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>

The above is the content of the sample code shared by JS to obtain the SMS verification code and countdown function when the user registers. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!