提交表单后用弹窗实现OTP验证，替代verify.php页面跳转

实现步骤 #

1. 添加OTP验证弹窗的HTML结构

将这段代码放到页面</body>标签之前：

<!-- OTP验证弹窗 -->
<div id="otpModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
  <div style="background:white; max-width:400px; margin:10% auto; padding:20px; border-radius:8px;">
    <h3 style="margin-top:0;">输入验证码</h3>
    <p>我们已向你的邮箱发送了验证码，请输入</p>
    <input type="text" id="otpInput" placeholder="6位验证码" style="width:100%; padding:8px; margin:10px 0; border:1px solid #ddd; border-radius:4px;">
    <div id="otpMsg" style="color:red; font-size:14px; margin-bottom:10px;"></div>
    <button id="verifyOtpBtn" style="background:#007bff; color:white; border:none; padding:10px 20px; border-radius:4px; cursor:pointer;">验证</button>
    <button id="closeOtpModal" style="background:#ccc; color:white; border:none; padding:10px 20px; border-radius:4px; cursor:pointer; margin-left:10px;">关闭</button>
  </div>
</div>

2. 修改原AJAX的回调逻辑（替换跳转）

修正原代码的event参数缺失问题，并把跳转逻辑替换为弹窗显示：

<script type="text/javascript">
$(document).ready(function(){
  $('#regBtn').click(function(event){ // 传入event参数，避免未定义报错
    event.preventDefault();
    $.ajax({
      url:"register.php",
      type:"POST",
      data: $('#myForm').serialize(),
      beforeSend: function() {
        $('#RepMsg').fadeIn();
        $('#RepMsg').html('Sending OTP...');
      },
      success:function(response){
        if(response == 1){
          $('#RepMsg').fadeIn();
          $('#RepMsg').html('<i class="fa-solid fa-triangle-exclamation" style="color:red; font-size:11px;"></i>This Email is already Taken.')
        }else{ 
          // 替换跳转逻辑，显示OTP弹窗
          $('#otpModal').fadeIn();
          // 若后端返回用户唯一标识（如ID），可存到弹窗的data属性用于后续验证
          // $('#otpModal').data('userId', response);
        }
      }
    })
  });

  // 弹窗关闭逻辑
  $('#closeOtpModal').click(function(){
    $('#otpModal').fadeOut();
    $('#otpMsg').html('');
    $('#otpInput').val('');
  });

  // OTP验证提交逻辑
  $('#verifyOtpBtn').click(function(){
    const otp = $('#otpInput').val().trim();
    // const userId = $('#otpModal').data('userId'); // 若需用户ID则启用

    if(!otp || otp.length !== 6){
      $('#otpMsg').html('请输入有效的6位验证码');
      return;
    }

    $.ajax({
      url:"verify_otp.php", // 你的OTP验证后端接口
      type:"POST",
      data: {
        otp: otp
        // userId: userId // 若需用户ID则启用
      },
      beforeSend: function() {
        $('#otpMsg').html('正在验证...');
      },
      success:function(response){
        if(response == 'success'){
          $('#otpMsg').html('<span style="color:green;">验证成功！</span>');
          setTimeout(() => {
            $('#otpModal').fadeOut();
            // 验证成功后可按需跳转，比如跳转到个人中心
            // window.location.replace('dashboard.php');
          }, 1500);
        }else{
          $('#otpMsg').html('验证码错误，请重新输入');
        }
      }
    })
  });
});
</script>

3. 后端配合调整

• register.php：成功插入用户并发送OTP后，返回用户唯一标识（如用户ID）或成功状态，不要返回跳转指令。
• 新增verify_otp.php：接收前端传的OTP（及用户ID），验证OTP有效性，返回success或错误信息。

内容的提问来源于stack exchange，提问作者Ditik Rimal