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

$(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)
	}
	
}); // 入口函数

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

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