Bei der Benutzerregistrierung ist in der Regel ein SMS-Bestätigungscode erforderlich und für den interaktiven Effekt muss auch ein Countdown hinzugefügt werden.
Der Effekt ist wie folgt:
<p class="user-form"> <form action="{{ path('zm_member_register') }}" 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>
Der Bestätigungscode hier ist über diese URL im Hintergrund ({{ path('zm_member_get_salt') }})) Darin werden die beiden Werte der Mobiltelefonnummer und des Typs (Typ=1 ist Registrierung) übergeben. Wenn der Wert im Hintergrund erfolgreich empfangen wurde, wird der Erfolgswert Status angezeigt zurückgegeben werden.
Auf dieser Grundlage wird der Countdown für den Bestätigungscode implementiert, d. h. nachdem das Urteil erfolgreich ist. Rufen Sie die gekapselte Countdown-Funktion time() auf. Beachten Sie, dass der Bestätigungscode eine Eingabe vom Typ button verwenden sollte. Zu diesem Zeitpunkt können Sie seinen Wert leicht ändern, um die Countdown-Zeit anzuzeigen.
<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>