ฉันเพิ่งสร้างโครงการที่โครงการต้องการเกี่ยวข้องกับรหัสการยืนยันหมายเลขโทรศัพท์มือถือ นั่นคือเมื่อผู้ใช้คลิกเพื่อรับรหัสการยืนยันเราจะส่งข้อความไปยังโทรศัพท์มือถือของผู้ใช้และปุ่มนับถอยหลังจะปรากฏขึ้นซึ่งคล้ายกับเอฟเฟกต์การชำระเงินของโทรศัพท์มือถือ Alipay ให้ฉันแบ่งปันรหัสการใช้งานสองรหัสกับคุณด้านล่าง
จะรับรหัสการยืนยันโทรศัพท์มือถือได้อย่างไร?
Xiaoyue ไม่ทราบว่าคุณใช้แพลตฟอร์มใดเพื่อรับรหัสการตรวจสอบ แต่จะบอกคุณว่าแพลตฟอร์มใดที่ฉันได้รับ
Leancloud: https://leancloud.cn/
เอกสาร: https://leancloud.cn/docs/sms_guide-js.html
บนแพลตฟอร์มนี้คุณต้องลงทะเบียนบัญชีและตั้งค่าข้อมูลของคุณเองในการตั้งค่าเพื่อใช้งานตามเอกสาร ฉันจะไม่พูดอะไรมากมายเกี่ยวกับที่นี่ ส่วนใหญ่ใช้งานอินเทอร์เฟซบางส่วนในพื้นหลัง หากเรามีความสามารถในส่วนหน้าเราสามารถลองเขียนอินเทอร์เฟซใน PHP ด้วยตัวเอง (ฉันเขียนขี้เกียจไม่ได้)
มักจะมีสองอินเทอร์เฟซ:
1. ส่งคำขอตรวจสอบ (ซึ่งจะช่วยให้โทรศัพท์ของคุณได้รับการตรวจสอบโดย SMS)
2. ส่งคืนข้อมูลเพื่อตรวจสอบว่าหมายเลขโทรศัพท์มือถือมีความสอดคล้องและตรวจสอบว่ามีความสอดคล้องหรือไม่
มันสามารถนำไปใช้ตามอินเตอร์เฟสของ Backend Siege Lion
หน้าส่วนหน้าทำงาน
รหัสต่อไปนี้คือหน้าเว็บที่แสดงในภาพด้านบน
<div> <div> <span> <img src = "img/close.png"> </span> <div> <p> <pan> หมายเลขมือถือ: </span> <อินพุตประเภท = "โทร" id = "มือถือ" onkeyup = "value.replace (/[^/w/w /.// รหัส: </span> <อินพุต type = "tel" placeholder = "ป้อนรหัสการตรวจสอบ"> <span> รับรหัสการตรวจสอบ </span> </p> <div> ส่ง </div> <p> ส่งผลสำเร็จ </p> <p> เราจะแจ้งให้คุณทราบโดยเร็วที่สุด </p> <div> ฉันรู้ </div> </div> </div> </div>
ตรวจสอบว่าหมายเลขโทรศัพท์มือถือถูกต้องหรือไม่
// ตรวจสอบหมายเลขโทรศัพท์มือถือ // อินพุตปกติที่เขียนบนหน้านี้เขียนด้วย jQuery.extend ({checkMobileno: ฟังก์ชั่น (str) {var re =/^1 [3 | 7 | 5 | 8]/d {9} $/; if (re.test (str))JS/JQ ส่วนจัดการส่งคำขอตรวจสอบ SMS
// ส่งรหัสการยืนยันไปยังโทรศัพท์มือถือ $ .AJAX ({ประเภท: 'รับ', URL: "อินเทอร์เฟซที่ได้รับจากพื้นหลังของคุณ" + มือถือ, // นั่นคืออินเตอร์เฟสด้านบน 1Success: ฟังก์ชั่น (ข้อมูลสถานะ) {ถ้า (data.errcode == 0) "ปิดใช้งาน"); $ (". code1"). css ("พื้นหลังสี", "#b4b2b3"); // ต่อไปนี้เป็นรหัสเอฟเฟกต์เพื่อใช้การนับถอยหลัง var d = วันที่ใหม่ (); d.setseconds (d.getSeconds () + 59); var m = d.getmonth () + d.getHours () + ':' + d.getMinutes () + ':' + d.getSeconds (); var id = ".code1"; var end_time = วันที่ใหม่ (วันที่. parse (time.replace (/ -/g, "/))) setInterval (function () {ถ้า (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 = '' ถ้า (วัน> 0) {time_text + = วัน + 'วัน';} ถ้า (ชั่วโมง> 0) {ถ้า (ชั่วโมง <10) {ชั่วโมง = '0' + ชั่วโมง; 'นาที';} ถ้า (วินาที> 0) {ถ้า (วินาที <10) {วินาที = '0' + วินาที;} time_text + = วินาที + 'วินาที';} $ (id) .Text (time_text);} else {clearInterval (ตัวจับเวลา); $ ("รหัส 1") Code '); $ (". code1"). css ("พื้นหลังสี", "#f67a62");}}, 1000);ส่งข้อมูลไปยังเซิร์ฟเวอร์
// ไม่ว่ารหัสการตรวจสอบจะสอดคล้องกับรหัสการตรวจสอบที่ส่งโดยโทรศัพท์มือถือ $ .ajax ({ประเภท: 'รับ', url: "อินเตอร์เฟส 2", ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {ถ้า (data.errcode == 0) {// ส่งข้อมูลไปยังเซิร์ฟเวอร์ // ข้อมูลที่นี่เพื่อดูความต้องการของคุณในการเขียน "project_id": pid, "โทรศัพท์": มือถือ, "อุปกรณ์": d}), ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {ถ้า (data.errcode == 0) {$ ('. page1'). ซ่อน () {Alert (data.errmsg);}});} else {alert ("รหัสการตรวจสอบไม่ถูกต้อง!");}}, ข้อผิดพลาด: ฟังก์ชั่น (ข้อมูล, สถานะ) {แจ้งเตือน (สถานะ);}});});ข้างต้นเป็นคำอธิบายแบบเต็มของเอฟเฟกต์การนับถอยหลัง JS/JQ ที่แนะนำโดยตัวแก้ไขให้คุณเกี่ยวกับเอฟเฟกต์การนับถอยหลังรหัสการตรวจสอบโทรศัพท์มือถือฟรี ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!