I recently made a project where the project needs involve the mobile phone number verification code. That is, when the user clicks to obtain the verification code, we will send a message to the user's mobile phone, and a countdown button will appear, which is very similar to the payment effect of Alipay mobile phone. Let me share two implementation codes with you below.
How to get mobile phone verification code?
Xiaoyue doesn’t know which platform you use to obtain the verification code, but tells you which platform I obtained it on.
LeanCloud: https://leancloud.cn/
Documentation: https://leancloud.cn/docs/sms_guide-js.html
On this platform, you need to register an account and set your own information in the settings to operate according to the document. I won’t say much about it here. Most of them operate some interfaces in the background. If we have the ability in the front end, we can try to write interfaces in PHP by ourselves. (I can't write lazy.)
There are usually two interfaces:
1. Send a verification request (this will allow your phone to be verified by SMS)
2. Return data to verify whether the mobile phone number is consistent and verify whether it is consistent.
It can be implemented according to the interface of the backend siege lion.
Front-end page work
The following code is the page shown in the picture above
<div><div><span><img src="img/close.png"></span><div><p><span>Mobile number:</span><input type="tel" id="mobile" onkeyup="value=value.replace(/[^/w/.//]/ig,'')" required="" placeholder="Please enter your mobile phone number"></p><p><span>Verification code:</span><input type="tel" placeholder="enter the verification code"><span>Get the verification code</span></p><div>Submit</div><div><p>Submit successfully</p><p>We will notify you as soon as possible after the request is successful</p><p>! </p><div>I know</div></div></div></div>
Verify whether the mobile phone number is correct
//Check the mobile phone number//The regular input written on the page is written in jQuery.extend({checkmobileNo: function(str) {var re =/^1[3|7|5|8]/d{9}$/;if (re.test(str)) {return true;} else {return false;}}});JS/JQ part handles sending SMS verification request
//Send verification code to the mobile phone $.ajax({type: 'GET',url:"Interface provided by your background" + mobile, //That is, the above interface 1success: function(data, status) {if (data.errcode==0) {alert("Sent");$(".code1").attr("disabled", "disabled");$(".code1").css("background-color", "#b4b2b3");//The following is the effect code to implement countdown var d = new Date();d.setSeconds(d.getSeconds() + 59);var m = d.getMonth() + 1;var time = d.getFullYear() + '-' + m + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();var id = ".code1";var end_time = new Date(Date.parse(time.replace(/-/g, "/"))).getTime(),// Month is the actual month -1sys_second = (end_time - new Date().getTime()) / 1000;var 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) % 60);var second = 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 (minute > 0) {if (minute < 10) {minute = '0' + minute;}time_text += minute + 'minute';}if (second > 0) {if (second < 10) {second = '0' + second;}time_text += second + 'second';}$(id).text(time_text);} else {clearInterval(timer);$(".code1").attr("disabled", false);$(".code1").text('get verification code');$(".code1").css("background-color", "#f67a62");}},1000); }else{alert("Send failed, please try again.");}},error: function(data, status) {alert(status);}});});Submit information to the server
//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({ //Data here to see your needs to write "project_id": pid,"phone": mobile,"device":d}),success: function(data, status) {if (data.errcode==0) {$('.page1').hide();$('.page2').show();}else{alert("Submission failed, please try it once!");}},error: function(data, status) {alert(data.errMsg);}});}else{alert("Verification code is incorrect!");}},error: function(data, status) {alert(status);}});});The above is the full description of the JS/jQ countdown effect introduced by the editor to you on the free mobile phone verification code countdown effect. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!