J'ai récemment réalisé un projet où les besoins du projet impliquent le code de vérification du numéro de téléphone portable. Autrement dit, lorsque l'utilisateur clique pour obtenir le code de vérification, nous enverrons un message au téléphone mobile de l'utilisateur, et un bouton de compte à rebours apparaîtra, ce qui est très similaire à l'effet de paiement du téléphone mobile Alipay. Permettez-moi de partager deux codes d'implémentation avec vous ci-dessous.
Comment obtenir le code de vérification du téléphone mobile?
Xiaoyue ne sait pas quelle plate-forme vous utilisez pour obtenir le code de vérification, mais vous indique sur quelle plate-forme je l'ai obtenue.
Leancloud: https://leancloud.cn/
Documentation: https://leancloud.cn/docs/sms_guide-js.html
Sur cette plate-forme, vous devez enregistrer un compte et définir vos propres informations dans les paramètres à fonctionner en fonction du document. Je n'en dirai pas grand-chose ici. La plupart d'entre eux exploitent des interfaces en arrière-plan. Si nous avons la capacité à l'avant, nous pouvons essayer d'écrire des interfaces en PHP par nous-mêmes. (Je ne peux pas écrire paresseux.)
Il y a généralement deux interfaces:
1. Envoyez une demande de vérification (cela permettra à votre téléphone d'être vérifié par SMS)
2. Renvoyez les données pour vérifier si le numéro de téléphone mobile est cohérent et vérifiez s'il est cohérent.
Il peut être implémenté en fonction de l'interface du lion de siège backend.
Travail de page frontale
Le code suivant est la page illustrée dans l'image ci-dessus
<div> <div> <span> <img src = "img / close.png"> </span> <div> <p> <span> Numéro de mobile: </span> <entrée type = "tel" id = "mobile" onkeyup = "value = value.replace (/ [^ / ww /.// Code: </span> <input type = "tel" placeholder = "Entrez le code de vérification"> <span> obtenez le code de vérification </span> </p> <v> soumettre </v> <v> <p> Soumettre avec succès </p> <p> nous vous informerons le plus tôt possible après la réussite de la demande </p> <p>! </p> <div> Je sais </div> </div> </div> </div>
Vérifiez si le numéro de téléphone mobile est correct
// Vérifiez le numéro de téléphone mobile // L'entrée régulière écrite sur la page est écrite dans jQuery.Extend ({CheckMobileNo: fonction (str) {var re = / ^ 1 [3 | 7 | 5 | 8] / d {9} $ /; if (re.test (str)) {return true;} else {return false;}}});JS / JQ Pièce des gatts envoyant une demande de vérification SMS
// Envoi du code de vérification au téléphone mobile $ .ajax ({type: 'get', URL: "Interface fournie par votre arrière-plan" + mobile, // c'est-à-dire l'interface ci-dessus 1Success: function (data, status) {if (data.errcode == 0) {alert ("envoyé"); $ (". Code1"). "Désvable"); $ (". Code1"). CSS ("Background-Color", "# b4b2b3"); // Ce qui suit est le code d'effet pour implémenter le compte à rebours var d = new Date (); D.SetSeconds (D.GetSeConds () + 59); var m = D.getmonth () + 1; var time = d.gethear () + '-' + m + '+ D.OgetDate ()'. + d.Gethours () + ':' + d.getMinutes () + ':' + d.getSeconds (); var id = ".code1"; var end_time = new Date (date.parse (time.replace (/ - / g, "/ aller setInterval (function () {if (sys_second> 1) {sys_second - = 1; var day = math.floor ((sys_second / 3600) / 24); var hour = math.floor ((sys_second / 6600)% 24); var minus Math.floor (sys_second% 60); var time_text = ''; if (day> 0) {time_text + = day + 'day';} if (hour> 0) {if (hour <10) {hour = '0' + hour;} time_tex 'minute';} if (second> 0) {if (second <10) {second = '0' + second;} time_text + = seconde + 'second';} $ (id) .text (time_text);} else {ClearInterval (tempor); $ (".. Code '); $ (". Code1"). CSS ("Background-Color", "# f67a62");}}, 1000);} else {alert ("Send Faiched, veuillez réessayer.");}}, error: function (data, status) {alert (status);}});});Soumettre des informations au serveur
// Le code de vérification est cohérent avec le code de vérification envoyé par le téléphone mobile $ .ajax ({type: 'get', url: "interface 2", succès: fonction (data, status) {if (data.errcode == 0) {// soumettre des informations au serveur $ .ajax ({type: 'post', "url:" Soumettre l'interface que vous avez demandé pour remplir le serveur ", jon. // Données ici pour voir vos besoins pour écrire "project_id": pid, "téléphone": mobile, "périphérique": d}), succès: function (data, status) {if (data.errcode == 0) {$ ('. Page1'). Hide (); $ ('. Page2'). Show ();} else {alert ("Soumis {alert (data.errmsg);}});} else {alert ("Le code de vérification est incorrect!");}}, erreur: fonction (data, status) {alert (status);}});});Ce qui précède est la description complète de l'effet de compte à rebours JS / JQ qui vous est présenté par l'éditeur sur l'effet de compte à rebours du code de vérification du téléphone mobile gratuit. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!