《在网页中实现手机验证码登陆代码》

JavaScript代码如下：

// 0 入口函数
$(function(){// 1、点击获取验证码，请求接口，发给用户验证码$('#getNum').on('click',function(){// 2、获取用户的手机号var phoneNum = $('.Rusername').val();// console.log(phoneNum)// 2.7 要符合手机号的标准才能向用户的手机号发送验证码var regex = new RegExp($('.Rusername').attr('regex'));if(!regex.test($('.Rusername').val())){alert("请输入正确手机号");}else{// 2.4 调用发送短信验证码的接口check(phoneNum,tpl_val);count($(this));// 2.4.1 把#code#=431515 进行截取字符，最终拿到发给用户的验证码var tpl_value = decodeURIComponent(tpl_val);// console.log(tpl_value);chenkNum = tpl_value.slice(7);console.log(chenkNum); // 这个就是发给用户的验证码}});// 2.1 根据接口文档，封装函数function check(mobile,tpl_value){$.ajax({type:'get',// url:'http://v.juhe.cn/sms/send?mobile=手机号码&tpl_id=短信模板ID&tpl_value=%23code%23%3D654654&key=',url:'http://v.juhe.cn/sms/send',data:{mobile:mobile,tpl_id:888,tpl_value:tpl_value,key:'648a729c43b06d59c0362850587bca'},dataType:"jsonp",jsonp:"callback",success:function(data){console.log(data) // {reason: "操作成功", result: {…}, error_code: 0}// 2.5 用户输入验证码，点击登录// 点击登录$('.goRegister').on('click',function(){console.log(1111)// 2.5.1 如果验证码发送成功，对验证码进行成功匹配，否则提示用户错误信息if(data.error_code === 0){// 2.5.2 如果发送的验证码和用户输入的验证码一致，就登录成功，否则提示用户验证不正确if(chenkNum === $('.phone').val()){alert("登录成功");// 进入到网站中window.location = 'https://www.boxuegu.com/';}else{alert("您输入的验证码有误，请输入正确的验证码");}}else{// 否则提示用户错误信息alert(data.reason);}});}})}// 2.2 封装生成随机的6位数的函数function mathRan(){var num = '';for(var i = 0; i < 6; i++){num += Math.floor(Math.random() * 10);}return num;}var mathNum = mathRan();// console.log(mathNum); // 455969// 2.3 根据接口文档，对验证码进行转换urlencode形式var tpl_val = encodeURIComponent('#code#='+ mathNum);// console.log(tpl_val); // %23code%23%3D313395// 2.6 封装倒计时函数var countNum = 60;function count(elm){if(countNum == 0){elm.attr('disabled',false);elm.val('获取验证码');countNum = 60;return;}else{elm.attr('disabled',true);elm.val('重新发送('+ countNum + 's)');countNum--;}setTimeout(function(){count(elm)},1000)}}); // 入口函数

短信模板可以去相关数据网站申请，作者这里用到的是来自聚合数据（https://www.juhe.cn/）的短信模板。

HTML代码如下：

<div id="loginBox"><div class="login-changeTab"><div class="login-register-box"><div class="login-register clearfix"><div class="register-button" align="center">短信验证码登录</div></div><div class="register-content"><div class="registerUsernameBox"><input type="tel" class="Rusername"  maxlength="11" placeholder="请输入手机号" regex="^[1][3,4,5,7,8][0-9]{9}$"/><span></span></div><div class="registerPassword"><input type="number" class="phone" maxlength="6" placeholder="请输机验证码"/><br /><input type="button" id="getNum" value="获取验证码"><span></span></div><div class="goRegister">登录</div></div></div></div></div>

CSS代码如下;

.register-button{background-color: lightskyblue;width: 166px;
}
#getNum{width: 166px;
}
.goRegister{background-color: lightskyblue;width: 166px;text-align: center;
}
#loginBox{float: left;
}

《在网页中实现手机验证码登陆代码》相关推荐

ComeFuture英伽学院——2020年全国大学生英语竞赛【C类初赛真题解析】(持续更新)
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
ComeFuture英伽学院——2019年全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
信息学奥赛真题解析（玩具谜题）
玩具谜题(2016年信息学奥赛提高组真题) 题目描述小南有一套可爱的玩具小人, 它们各有不同的职业.有一天, 这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的 ...
信息学奥赛之初赛第1轮讲解（01-08课）
信息学奥赛之初赛讲解 01 计算机概述系统基本结构信息学奥赛之初赛讲解 01 计算机概述系统基本结构_哔哩哔哩_bilibili 信息学奥赛之初赛讲解 02 软件系统计算机语言进制转换信息 ...
信息学奥赛一本通习题答案（五）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通习题答案（三）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通提高篇第六部分数学基础相关的真题
第1章快速幂 1875:[13NOIP提高组]转圈游戏信息学奥赛一本通(C++版)在线评测系统第2 章素数第 3 章约数第 4 章同余问题第 5 章矩阵乘法第 6 章 ...
信息学奥赛一本通题目代码（非题库）
为了完善自己学c++,很多人都去读相关文献,就比如<信息学奥赛一本通>,可又对题目无从下手,从今天开始,我将把书上的题目一一的解析下来,可以做参考,如果有错,可以告诉我,将在下次解析里重 ...
信息学奥赛一本通（C++版）刷题记录
总目录详见:https://blog.csdn.net/mrcrack/article/details/86501716 信息学奥赛一本通(C++版) 刷题记录 http://ybt.ssoier. ...
最近公共祖先三种算法详解 + 模板题建议新手收藏例题：信息学奥赛一本通祖孙询问距离
首先什么是最近公共祖先?? 如图:红色节点的祖先为红色的1, 2, 3. 绿色节点的祖先为绿色的1, 2, 3, 4. 他们的最近公共祖先即他们最先相交的地方,如在上图中黄色的点就是他们的最近公共祖先 ...

《在网页中实现手机验证码登陆代码》

《在网页中实现手机验证码登陆代码》相关推荐

最新文章

热门文章