Ich habe kürzlich ein Projekt erstellt, bei dem die Projektanforderungen den Überprüfungscode von Mobiltelefonnummer umfassen. Wenn der Benutzer klickt, um den Bestätigungscode zu erhalten, senden wir eine Nachricht an das Mobiltelefon des Benutzers, und es wird eine Countdown -Schaltfläche angezeigt, die dem Zahlungseffekt des Alipay -Mobiltelefons sehr ähnlich ist. Lassen Sie mich unten zwei Implementierungscodes mit Ihnen teilen.
Wie bekomme ich Mobiltelefonverifizierungscode?
Xiaoyue weiß nicht, auf welcher Plattform Sie den Verifizierungscode erhalten, sondern teilt Ihnen mit, auf welcher Plattform ich ihn erhalten habe.
LeanCloud: https://leancloud.cn/
Dokumentation: https://leancloud.cn/docs/sms_guide-js.html
Auf dieser Plattform müssen Sie ein Konto registrieren und Ihre eigenen Informationen in den Einstellungen festlegen, um sie gemäß dem Dokument zu betreiben. Ich werde hier nicht viel darüber sagen. Die meisten von ihnen betreiben einige Schnittstellen im Hintergrund. Wenn wir die Fähigkeit im vorderen Ende haben, können wir versuchen, Schnittstellen in PHP selbst zu schreiben. (Ich kann nicht faul schreiben.)
Es gibt normalerweise zwei Schnittstellen:
1. Senden Sie eine Überprüfungsanforderung (so kann Ihr Telefon durch SMS überprüft werden).
2. Daten zurückgeben, um zu überprüfen, ob die Mobiltelefonnummer konsistent ist, und zu überprüfen, ob sie konsistent ist.
Es kann gemäß der Schnittstelle des Backend -Belagerungslöwen implementiert werden.
Front-End-Seitenarbeit
Der folgende Code ist die Seite, die im obigen Bild angezeigt wird
<div> <div> <span> <img src = "img/close.png"> </span> <div> <p> <span> Handynummer: </span> <input type = "tel" id = "Mobile" OnKeyUp = "value = value.Replace (/[^/w /.//). Nummer "> </p> <p> <span> Verifikationscode: </span> <Eingabe type =" tel "placeholder =" Geben Sie den Verifizierungscode ein "> <span> Rufen Sie den Verifizierungscode ab </span> </p> <div> Senden </div> <div> <p> erfolgreich senden </p> <p> Wir werden Sie so schnell benachrichtigen, nachdem die Anfrage erfolgreich ist. </p> <div> Ich weiß </div> </div> </div> </div>
Überprüfen Sie, ob die Mobiltelefonnummer korrekt ist
// Überprüfen Sie die Mobiltelefonnummer // Die auf der Seite geschriebene reguläre Eingabe ist in jQuery.extend ({{checkMobileno: function (str) {var re =/^1 [3 | 7 | 5 | 8]/D {9} $/; if (re.Test (str)) {return true;} {return {}}}}}}}} geschrieben;JS/JQ -TEIL -PREATLE -SEPT -SMS -Überprüfungsanforderung
// Verifizierungscode an das Mobiltelefon senden $ .ajax ({type: 'get', url: "Schnittstelle durch Ihren Hintergrund" + Mobile, // Das obige Schnittstellen 1Sukcess: Funktion (Daten, Status) {if (data.errcode == 0) {alert ("gesendet"); $ (". Code1"). "Deaktiviert"); $ (". code1"). d.gethours () + ':' + d.getMinutes () + ':' + d.getSeconds (); var id = ".Code1"; var end_time = new Date (Datum.Parse (Zeit.Replace.Replace (/ -/G). = setInterval (function () {if (sys_second> 1) {sys_second -= 1; var day = math.floor ((sys_second / 3600) / 24); var stound = math.floor ((sys_second / 3600) % 24); var mathow.Floor ((sys_scond / 60). 60); var time_text = ''; if (tag> 0) {time_text + = tag + 'tag';} if (stunde> 0) {if (stunde <10) {stündlich = '0' + stündlich;} time_text + = stündlich + 'stündlich'; 0) {if (Second <10) {Second = '0' + Second;} Time_Text + = Second + 'Second';} $ (id) .Text (time_text);} else {ClearInterval (Timer); Code '); $ (". code1").Senden Sie Informationen an den Server
// Ob der Verifizierungscode mit dem vom Mobiltelefon gesendeten Verifizierungscode übereinstimmt $ .ajax ({Typ: 'GET', URL: "Schnittstelle 2", Erfolg: Funktion (Daten, Status) {if (data.errcode == 0) {// Informationen übermitteln Sie Informationen an den Server. // Daten hier, um Ihre Bedürfnisse zum Schreiben von "Project_id": PID, "Telefon": mobil, "Gerät": D}), Erfolg: Funktion (Daten, Status) {if (data.rcode == 0) {$ ('. Seite1'). Hide (); $ ('. Seite 2'). {alert (data.errmsg);}});} else {alert ("Verifizierungscode ist falsch!");}}, Fehler: Funktion (Daten, Status) {alert (Status);}});});Das obige ist die vollständige Beschreibung des vom Editor für den kostenlosen Mobiltelefonverifizierungscode -Countdown -Effekts vorgelegten JS/JQ -Countdown -Effekt. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!