《在网页中实现手机验证码登陆代码》 WEB前端全栈开发

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 = https://www.it610.com/article/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=https://www.it610.com/article/%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代码如下：

短信验证码登录登录

CSS代码如下;

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

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