最近、プロジェクトに必要なプロジェクトに携帯電話番号確認コードが含まれるプロジェクトを作成しました。つまり、ユーザーが検証コードをクリックすると、ユーザーの携帯電話にメッセージを送信すると、Alipay携帯電話の支払い効果に非常に似たカウントダウンボタンが表示されます。以下の2つの実装コードを共有させてください。
携帯電話検証コードを取得する方法は？
Xiaoyueは、検証コードを取得するために使用するプラットフォームを知りませんが、取得したプラットフォームを教えてくれます。
Leancloud： https：//leancloud.cn/
ドキュメント： https：//leancloud.cn/docs/sms_guide-js.html
このプラットフォームでは、アカウントを登録し、ドキュメントに従って操作するために設定に独自の情報を設定する必要があります。ここではあまり言いません。それらのほとんどは、バックグラウンドでいくつかのインターフェイスを操作します。フロントエンドに能力がある場合は、自分でPHPでインターフェイスを作成しようとすることができます。 （私は怠zyを書くことができません。）
通常、2つのインターフェイスがあります。
1.確認リクエストを送信します（これにより、携帯電話をSMSによって検証できます）
2。データを返して、携帯電話番号が一貫しているかどうかを確認し、一貫しているかどうかを確認します。
バックエンド包囲ライオンのインターフェイスに従って実装できます。
フロントエンドページの作業
次のコードは、上の写真に示されているページです
<div> <div> <span> <img src = "img/close.png"> </span> <div> <p> <span>携帯電話番号：</span> <入力タイプ= "Tel" id = "mobile" onkeyup = "value = value.replace（/[^/w/.//]番号 "> </p> <p> <span>検証コード：</span> <入力タイプ=" tel "placeholder ="検証コードを入力 "> <span>検証コードを取得</span> </p> <div>送信</div> <div> <p>正常に</p> <p>要求が成功した後すぐにすぐに通知します</p> <p> </p> <div> </div> </div> </div> </div>を知っています
携帯電話番号が正しいかどうかを確認します
//携帯電話番号を確認する//ページに記述された通常の入力はjquery.extend（{checkmobileno：function（str）{var re =/^1 [3 | 7 | 5 | 8]/d {9} $/; if（re.test（str））{return true;} return {return {return;}）;JS/JQパーツは、SMS検証要求の送信を処理します
//確認コードを携帯電話に送信します$ .AJAX（{type： 'get'、url： "あなたの背景によって提供されるインターフェイス" +モバイル、つまり、つまり、上記のインターフェイス1Success：function（data、status）{if（data.errcode == 0）{alert（ "sent"）; $（ "。"。コード1 "）。 "disabled"）; $（ "。code1"）。css（ "background-color"、 "＃b4b2b3"）; + d.gethours（） + '：' + d.getminutes（） + '：' + d.getSeconds（）; var id = ".code1"; var end_time = new date（date.parse（/ - /g、 "/"）。）.gettime（）、月） Timer = setInterval（function（）{if（sys_second> 1）{sys_second- = 1; var day = math.floor（（sys_second / 3600） / 24）; var hour = math.floor（（sys_second / 3600）％24）; var minute = math.floor（（sys_second / 60）; var second / var 60）; 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_text + = hour + 'hour';} if> 0）{minute <<10） + = minute + 'minute';} if（second> 0）{if（second <10）{second = '0' + second;} time_text + = second + 'second';} $（id）.text（time_text）;} code '）; $（ "。code1"）。css（ "background-color"、 "＃f67a62"）;}}、1000）;サーバーに情報を送信します
//Whether the verification code is consistent with the verification code sent by the mobile phone $.ajax({type: 'GET',url: "Interface 2",success: function(data, status) {if (data.errcode==0) {//Submit information to the server $.ajax({type: 'POST',url: "Submit the information interface you asked for to fill in to the server",data: JSON.stringify({ //ここに「project_id」：pid、 "phone"：mobile、 "device"：d}）、成功：function（data、status）{if（data.errcode == 0）{$（ '。page1'）。 {alert（data.errmsg）;}}）;} else {alert（ "検証コードは間違っている！"）;}}、error：function（data、status）{alert（status）;}}）;}）;上記は、無料の携帯電話検証コードカウントダウン効果について編集者がお客様に紹介したJS/JQカウントダウン効果の完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！