短信验证功能JS+PHP

PHP短信验证功能

PHP短信验证功能_尘中客的博客-CSDN博客_php 短信验证

js ajax实现短信验证码功能_季小沫的博客-CSDN博客

php短信验证码60秒时间限定_@互亿无线的博客-CSDN博客

思路：

一：前端发起验证码请求ajax，给后端传入手机号----后端生成验证码，发送给短信平台，并返回验证码和时间----前端填入验证码校验，是否超时，是否正确，通过校验显示校验通过，并可以提交表单，可以用隐藏的input完成这个功能

二：前端发起验证码请求ajax，给后端传入手机号----后端生成验证码，发送给短信平台，写入数据库验证码和时间----前端填入验证码校验，发给后端验证----后端验证，通过返回1，不通过返回0

三：防止恶意发送的方法，可以用次数限制，需要用户识别码，倒计时，防刷新，，，先做简单的吧，还是。。。

下面是我的一个实例：

html部分

					<div class="mui-input-row">
						<label>电话<span class="redCor">*</span></label>
						<input type="text" id="tel" name="tel" pattern="[1]+[3456789]+\d{9}"  required>
					</div>
					<div class="mui-input-row">
						<label style="width: 30%;display: inline-block;">验证码<span class="redCor">*</span></label>
						<input class="code" id="inputcode" style="width: 40%;display: inline-block;float: none;"  type="text" name="code" maxlength="4" placeholder="请输入验证码" required />
						<button id="codeBut" class="mui-btn mui-btn-primary mui-btn-outlined" style="width: 30%;display: inline-block;" id="getSms">获取验证码</button>
					</div>
					<div class="mui-input-row mui-hidden">
						
						<input type="text"  id="ioCode" value="" required>
					</div>		

js部分

    var btn=document.querySelector('#codeBut');
    var time=60;
	var code=null;
	var atime;
	var timer;
    btn.addEventListener('click',function () {
		
	if(isPhoneNum()){
        btn.disabled=true;	
		var tel=document.getElementById("tel").value;	
		mui.ajax('/sever/yzmSever.php',{
			data:{
				tel:tel,
				status:0						
			},
			dataType:'json',//服务器返回json格式数据
			type:'post',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			// headers:{'Content-Type':'application/json'},	              
			success:function(res){
				 code=res;
				 console.log(code);
				 atime=Date.parse(new Date());
				 console.log(atime);
			},
			error:function(xhr,type,errorThrown){
				//异常处理；
				console.log(type);
			}
		});																								
																									
																									
        timer=setInterval(function () {
            if (time<0){
                clearInterval(timer);
                btn.disabled=false;
                btn.innerHTML='发送验证码';
                time=60;
            }else {
                btn.innerHTML = '还剩' + time + '秒';
                time -= 1;
            }
        },1000);	
	}		
    });

	//校验手机号是否合法
	function isPhoneNum(){
		var phonenum = document.getElementById("tel").value;
		var myreg = /^([1]+[3456789]+\d{9})$/;  
		if(!myreg.test(phonenum)){ 
		alert('请输入有效的手机号码！'); 
		return false; 
		}else{
		return true;
		}
	};

	//校验验证码是否正确
	mui(".mui-input-row").on("change", "#inputcode", function() {
			var a = document.getElementById("inputcode").value;
			console.log(a);
			if(a==code){
				console.log("t");
				
				var btime=Date.parse(new Date());
				console.log(btime);
				if(((btime-atime)/1000)<60){  //判断验证码是否过了一分钟
					clearInterval(timer);
					btn.disabled=true;
					btn.classList.add("mui-btn-success");
					btn.innerHTML='已通过';
					document.getElementById("ioCode").value=1;
					
					
				}else{
					alert("验证码已过时效，请重新获取！");
				}
				
			}else{
				alert("验证码错误，请重新输入！");
			}
			
		});

后台php部分

<?php
header("Content-type:text/html;charset=UTF-8");

 $code = mt_rand(1000,9999);//随机验证码

$tel=$_POST['tel'];



	echo $code;
	header("Refresh:0;url=/sever/sendSms.php?code=".$code."&&tel=".$tel);	//阿里云平台发送短信api
	exit();