Heim > Web-Frontend > js-Tutorial > JS-Implementierung der Beispielcodefreigabe zum Erhalten eines SMS-Bestätigungscodes und einer Countdown-Funktion bei der Benutzerregistrierung

JS-Implementierung der Beispielcodefreigabe zum Erhalten eines SMS-Bestätigungscodes und einer Countdown-Funktion bei der Benutzerregistrierung

高洛峰
Freigeben: 2017-03-30 15:19:38
Original
1842 Leute haben es durchsucht

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:

JS-Implementierung der Beispielcodefreigabe zum Erhalten eines SMS-Bestätigungscodes und einer Countdown-Funktion bei der Benutzerregistrierung

<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>
Nach dem Login kopieren

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)
}
}
$(&#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>
Nach dem Login kopieren
Das Obige ist der Inhalt des von JS geteilten Beispielcodes, um den SMS-Bestätigungscode und die Countdown-Funktion zu erhalten, wenn sich der Benutzer registriert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.org). .php.cn)!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage