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;
}