注册页面手机验证码无跳转接收[html+js+ajax+php]

时间：2022-07-01 13:50:07

【学习笔记】

　　来源：注册时需要使用短信验证码，但是注册的时候，点击接收验证码时，会产生跳转（尼玛，这不是我想要的啊！o(╥﹏╥)o）

　　　　　查询资料和看书之后，知道使用js+ajax可以实现，就从网上找了一些博客的资料来看，最后写出了可以实现需求的代码。

　　主要参考方法：https://blog.csdn.net/isabellazheng1991/article/details/53543925

　　　　　　　　　https://q.cnblogs.com/q/45695/

【解决方法】

　　　　　

　　　　1个html页面,2个php页面,一个用于发送验证码一个用于验证,分开一是便于理解,二是防止点击注册时造成验证码反复产生,实际中写两个方法即可

　　　　　短信接入平台为容联云

1.register.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html">

<meta charset="utf-16">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>手机验证</title>

<link rel="stylesheet" type="text/css" href="register.css">

<script src="./jquery.min.js"></script>

<style type="text/css">

body{

font-family:arial;

font-style:normal;

font-weight:normal;

font-size:16px;

}

#table1 td:nth-of-type(3) input{

width:250px;

height:35px;

}

#table1 td:nth-of-type(4){

font-size:12px;

color:red;

}

#table2{

border:0;

width:300px;}

button{

width:120px;

height:40px;

color:white;

background-color:rgb(2, 114, 188);

border-radius:10%;

}

</style>

<script>

  function SendMsm(){

   //单独处理发送短信的验证

    s=document.getElementById("code_td");

    var phone=document.getElementById("phone").value;

    function vertiCodeSend(){

      $.ajax({

      url:"sendMes.php",  //发送验证码的php页面

      data:{"phone":phone},//传入后台

      type:"POST",//类型

      });

    }

  if(phone==""){s.innerHTML="请先输入手机号码";}

  else{vertiCodeSend();s.innerHTML="";}

  }

</script>

</head>

<body>

<div>

  <form  method="post" action="checkCode.php">

    <table id="table1">

    <tbody>

    <tr>

      <td><label for="phone">手机号码：</label></td>

      <td></td>

      <td>

        <input id="phone" type="text" name="phone" maxlength="11"></td>

    </tr>

    <tr>

      <td><label>手机验证码</label></td>

      <td></td>

      <td>

        <input  type="text" name="userCode" style="width:150px;"  >

        <input  type="button" style="width:100px;font-size:14px;" value="获取验证码" onclick="SendMsm()">

      </td>

      <td id="code_td"></td>

    </tr>

    </tbody>

    </table>

    <table id="table2">

    <tbody>

    <tr>

      <th><button type="submit" name="submit" value="注册">注册</button></th>

      <th><button type="reset">重置</button></th>

    </tr>

    </tbody>

    </table>

  </form>

</div>

</body>

</html>

2.sendMes.php

<?php

 session_start();

   // 产生4位随机数

    $str = rand(1000, 9999);

    // 新建变量接收

    $authCode=$str;

    // 删除上次的缓存

    unset( $_SESSION['authCodeS']);

    //给session中的authCodeS变量赋值

    $_SESSION['authCodeS']=$authCode;

    //主帐号

    $accountSid = 'xxxx';

    //主帐号Token

    $accountToken= 'xxxx';

    //应用Id

    $appId='xxxx';

    //请求地址，格式如下，不需要写https://

    $serverIP='app.cloopen.com';

    //请求端口

    $serverPort='8883';

    //REST版本号

    $softVersion='2013-12-26';

    // 加载SDK

    include './CCPRestSDK.php';

    function sendTemplateSMS($to,$datas,$tempId=1)

    {

         // 初始化REST SDK

         global $accountSid,$accountToken,$appId,$serverIP,$serverPort,$softVersion;

         $rest = new REST($serverIP,$serverPort,$softVersion);

         $rest->setAccount($accountSid,$accountToken);

         $rest->setAppId($appId);

         // 发送模板短信

         $result = $rest->sendTemplateSMS($to,$datas,$tempId);

    }

        sendTemplateSMS($_POST[phone],array($authCode,40));

 ?>

3.checkCode.php

<?php

    session_start();

    // 验证

    if($_SESSION['authCodeS']==$_POST['userCode']){

      echo '注册成功(づ￣3￣)づ╭❤～';

       echo '<meta http-equiv="refresh" content="2;url=register.html">';die;

    }

    else{

     echo '注册失败o(╥﹏╥)o';

     echo '<meta http-equiv="refresh" content="2;url=register.html">';die;

    }

?>

至于限制用户点击后睡眠一段时间，可以自己修改添加

　　　

　　　　　　

　　　　

　　

相关文章