前端|利用手机号登录获取手机验证码

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

问题描述

手机号直接登录账号的优势：

利用手机号直接登录账号在现有的app、微信小程序以及各大网址上都比较常见。利用手机号直接登录账号它省略的用户密码这一环节，直接采用验证码的形式进行用户身份验证，在一定程度上解决了因为用户个人原因造成的密码遗忘、丢失等情况，且对于用户个人的身份信息验证更为严格，更有利于保护用户账号安全。此外，利用手机号直接登录账号还可以满足产品的特殊需求。比如一些公司企业会事先给一些客户创建账号。这些客户来到平台时，直接输入验证码就可以进入使用了，而不需要补充密码，方便了用户登录。

解决方案

本次的实现效果如下图2.1：

图2.1 实现效果

从图2.1的效果中，我们可以看出。我们至少需要对是否输入的是有效的手机号，输入的验证码正确与否进行验证。

实现步骤：①创建相应的文件，并在HTML5中引入；②利用HTML5代码对页面框架进行搭建；③利用css对样式进行调整；④利用JavaScript对验证码进行初始化；⑤判断是否输入的是有效的手机号；⑥判断输入的验证码是否正确；

（因为要获取验证码,需要用到度授权使用百度地图Web组件API，所以部分效果不完善）

实现过程：

（1）利用HTML5代码对页面框架进行搭建：

手机号：                                                                                                                               验证码：                                                                       获取验证码                                                         登录                                                                       登录成功                                                    知道了                                                                   手机号快捷登录

（2）样式设置，根据效果对样式进行调整（代码省略）

（3）校验手机号

//校验手机号        jQuery.extend({            checkmobileNo: function(str) {                var re =/^1[3|7|5|8]\d{9}$/;                if (re.test(str)) {                    return true;                } else {                    return false;                }            }        });

（4）审核验证码。注意：发送的验证码：API+/手机号，审核时验证码应该是：API+/六位数字验证码/手机号

//当点击发送验证码的时候        $('.code1').click(function(){               //验证手机号合法               var  mobile = $("#mobile").val();               if  (!$.checkmobileNo(mobile)) {             alert("手机号无效");             return false;          }               //发送验证码给手机          $.ajax({             type: 'GET',             url:"API" + mobile,             success: function(data, status) {                 if (data.errcode==0) {                                    alert("已发送"); //                                $(".code1").attr("disabled",  "disabled");                      $(".code1").css("background-color",  "#b4b2b3");                     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(),                     //月份是实际月份-1                     sys_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 + '天';                             }                             if (hour > 0)  {                                    if (hour < 10) {                                          hour = '0' + hour;                                   }                                   time_text += hour + '小时';                             }                             if (minute >  0) {                                    if (minute < 10) {                                          minute = '0' + minute;                                   }                                   time_text += minute + '分';                             }                             if (second >  0) {                                 if (second  < 10) {                                     second =  '0' + second;                                 }                                 time_text +=  second + '秒';                             }                             $(id).text(time_text);                           } else {                                  clearInterval(timer);                              $(".code1").attr("disabled", false);                              $(".code1").text('获取验证码');                             $(".code1").css("background-color",  "#f67a62");                         }                     },                     1000);                                         }else{                       alert("发送失败，请再试一次。");                 }             },             error: function(data, status) {                 alert(status);             }          });    });

//点击提交按钮时 $('.demand2').click(function(){               var  mobile = $("#mobile").val();               var  num = $(".code").val();               //验证手机号可验证码               if  (mobile == "") {             alert('请输入手机号');             return false;          }          if (!$.checkmobileNo(mobile)) {             alert('手机号错误!');             return false;          }          if (num == '') {             alert('请输入验证码');             return false;          }          //验证验证码和手机发送的验证码是否一致          $.ajax({             type: 'GET',             url:  "API"+num+"/"+mobile,             success: function(data, status) {                 if (data.errcode==0) {                                    //向服务器提交信息                                    $.ajax({                               type: 'POST',                               url: "API",                               data: JSON.stringify({                                   "project_id":  pid,                                   "phone":  mobile,                                   "device":d                               }),                               success: function(data,  status) {                                   if (data.errcode==0) {                                                         $('.page1').hide();                                                         $('.page2').show();                                   }else{                                         alert("提交失败,请在尝试一次!");                                   }                               },                               error: function(data, status)  {                                   alert(data.errMsg);                               }                           });                 }else{                       alert("验证码不正确！");                 }             },             error: function(data, status) {                 alert(status);             }        });

END

实习主编   |   王楠岚

责       编   |   刘    连

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！