专栏首页算法与编程之美前端|利用手机号登录获取手机验证码

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

问题描述

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

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

解决方案

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

图2.1 实现效果

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

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

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

实现过程:

(1)利用HTML5代码对页面框架进行搭建:

       <div>

              <div>

                     <div>

                            <p>

                                   <span>手机号:</span>

                                   <input  type="tel" id="mobile" onkeyup="value=value.replace(/[^\w\.\/]/ig,&#39;&#39;)"  required="" placeholder="请输入您的手机号">

                            </p>

                            <p>

                                   <span>验证码:</span>

                                   <input  type="tel" placeholder="输入验证码">

                                   <span>获取验证码</span>

                            </p>

                            <div  class="demand demand2" style="width: 70%; margin-top: 20px;">登录</div>

                     </div>

                     <div>

                            <p>登录成功</p>                      

                            <div  class="demand demand3" style="width: 80%; margin-top: 20px; margin-bottom:  10px;">知道了</div>

                     </div>                

              </div>

       </div>

       <div  class="demand demand1" style="bgcolor: dodgerblue;">手机号快捷登录</div>

(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 团队


本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端|Grid实现自适应九宫格布局

    现在无论是做app还是做网站,宫格的布局也是必然存在的,那么如何使用css实现自适应的九宫格布局呢?下面简单来介绍一下css里面的grid实现九宫格布局。

    算法与编程之美
  • 前端|手风琴--抽屉式网页特效

    我们在浏览网页时或者翻转页面时,经常会看到很多精美的效果的效果。其中,抽屉式网页效果比较常见,它主要由图片和文字通过添加js来实现。抽屉式网页通过移动鼠标来实现...

    算法与编程之美
  • node+express使用multiparty实现文件上传

    文件上传在一个项目中是相对于比较基础的功能,今天分享一下自己是如何在nodejs中使用中间件multiparty实现文件上传的。nodejs环境的搭建就不赘述了...

    算法与编程之美
  • js 获取input的value值及验证手机号和汉字的正则表达式

    在项目中经常遇到需要验证输入内容的情况,可以通过 Javascript 判断输入内容,验证手机号或者是否为汉字。

    德顺
  • three.js 运行3D模型

    小蔚
  • django template实现定义临时变量,自定义赋值、自增实例

    {{value|add:-10}} value=5,则返回-5,这个比较好理解,减法就是加一个负数

    砸漏
  • 电信网络拓扑图自动布局之总线

    在前面《电信网络拓扑图自动布局》一文中,我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识,但是都没有深入地描述各种自动布局的用法,我们今天...

    HT for Web
  • 电信网络拓扑图自动布局之总线

    HT_hightopo
  • SpringBoot2.0 整合 Redis集群 ,实现消息队列场景

    Redis的分布式解决方案,在3.0版本后推出的方案,有效地解决了Redis分布式的需求,当一个服务宕机可以快速的切换到另外一个服务。redis cluster...

    知了一笑
  • 完美级解决web开发跨域问题

    依据我的理解,出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求, 如果你尝试突破这个限制,就是跨域。那么什么情况下会触发跨域呢?

    brzhang

扫码关注云+社区

领取腾讯云代金券