لقد قمت مؤخرًا بإنشاء مشروع حيث يتضمن احتياجات المشروع رمز التحقق من رقم الهاتف المحمول. أي عندما ينقر المستخدم للحصول على رمز التحقق ، سنرسل رسالة إلى الهاتف المحمول للمستخدم ، وسيظهر زر العد التنازلي ، وهو ما يشبه إلى حد كبير تأثير دفع الهاتف المحمول Alipay. اسمحوا لي أن أشارك اثنين من رموز التنفيذ معك أدناه.
كيف تحصل على رمز التحقق من الهاتف المحمول؟
لا يعرف Xiaoyue النظام الأساسي الذي تستخدمه للحصول على رمز التحقق ، ولكنه يخبرك بالمنصة التي حصلت عليها عليها.
Leancloud: https://leancloud.cn/
الوثائق: https://leancloud.cn/docs/sms_guide-js.html
على هذا النظام الأساسي ، تحتاج إلى تسجيل حساب وتعيين معلوماتك الخاصة في الإعدادات للعمل وفقًا للوثيقة. لن أقول الكثير عنها هنا. معظمهم يعملون بعض الواجهات في الخلفية. إذا كانت لدينا القدرة في الواجهة الأمامية ، فيمكننا محاولة كتابة واجهات في PHP من قبل أنفسنا. (لا أستطيع أن أكتب كسول.)
عادة ما يكون هناك واجهتان:
1. إرسال طلب التحقق (سيسمح هذا بالتحقق من هاتفك بواسطة SMS)
2. إرجاع البيانات للتحقق مما إذا كان رقم الهاتف المحمول متسقًا والتحقق مما إذا كان ثابتًا.
يمكن تنفيذها وفقًا لواجهة أسد الحصار الخلفي.
عمل الصفحة الأمامية
الرمز التالي هو الصفحة الموضحة في الصورة أعلاه
<viv> <viv> <span> <img src = "img/close.png"> </span> <fiv> <p> <ps> رقم الهاتف المحمول: </span> <إدخال type = "tel" id = "mobile" onKeyup = "falle = value.replace (/[^/w/ الرقم "> </p> <p> <span> رمز التحقق: </span> <type type =" tel "placeholder =" أدخل رمز التحقق "> <span> احصل على رمز التحقق </p> </p> <viv> إرسال </div> <p> <p> إرسال بنجاح </p> <p> سنقوم بإخطارك في أقرب وقت ممكن بعد أن يكون الطلب ناجحًا </p> <p>! </p> <viv> أعرف </div> </viv> </viv> </viv>
تحقق مما إذا كان رقم الهاتف المحمول صحيحًا
// تحقق من رقم الهاتف المحمول // المدخلات العادية المكتوبة على الصفحة مكتوبة في jQuery.Extend ({checkMobileno: function (str) {var re =/^1 [3 | 7 | 5 | 8]/d {9} $/؛ if (re.test (str)) {return true ؛يعالج جزء JS/JQ إرسال طلب التحقق من الرسائل القصيرة
// إرسال رمز التحقق إلى الهاتف المحمول $ .ajax ({type: 'get' ، url: "واجهة توفرها خلفيتك" + mobile ، // أي ، الواجهة أعلاه 1SUCCESS: الدالة (البيانات ، الحالة) {if (data.ercode == 0) {enlert ("sent") ؛ $ (". الكود 1"). "تعطيل") ؛ $ (". code1"). css ("colorse-color" ، "#b4b2b3") ؛ // التالية هو رمز التأثير لتنفيذ العد التنازلي var d = new date () ؛ d.SetSeconds (d.getSeconds () + 59) ؛ var m = d.getMonth () + 1 ؛ varyerlyear () d.gethours () + ':' + d.getMinutes () + ':' + d.getSeconds () ؛ var id = ".code1" ؛ var end_time = date.parse. parse (time.replace (/ -/g ، "/" timeer ()) ،//شهر هو الشهر الفعلي - = 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) math.floor (sys_second ٪ 60) ؛ var time_text = '' ؛ if (day> 0) {time_text + = day + 'day' ؛} if (hour> 0) {if (hour <10) {hour = '0' + hour ؛ + = دقيقة + 'دقيقة' ؛} if (second> 0) {if (second <10) {second = '0' + second ؛} time_text + = second + 'second' ؛} $ (id) .text (time_text) ؛} else {clearinterval (timer) ؛ $ (". code1"). الكود ') ؛ $ (". code1").إرسال المعلومات إلى الخادم
// ما إذا كان رمز التحقق يتوافق مع رمز التحقق الذي أرسله الهاتف المحمول $ .ajax ({type: 'get' ، url: "الواجهة 2" ، النجاح: الوظيفة (البيانات ، الحالة) {if (data.errcode == 0) {// إرسال المعلومات إلى الخادم $ .ajax ({type: 'post' ، url: // البيانات هنا لترى احتياجاتك لكتابة "project_id": pid ، "الهاتف": mobile ، "الجهاز": d}) ، النجاح: الوظيفة (البيانات ، الحالة) {if (data.errcode == 0) {$ (' {Alert (data.errmsg) ؛}}) ؛} آخر {Alert ("رمز التحقق غير صحيح!") ؛}} ، خطأ: الوظيفة (البيانات ، الحالة) {Alert (status) ؛}}) ؛}) ؛ما ورد أعلاه هو الوصف الكامل لتأثير العد التنازلي JS/JQ الذي أدخله المحرر لك على تأثير كود التحقق من الهاتف المحمول المجاني. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!