<form id="myForm">
  <input type="text" id="username" name="username" placeholder="用户名">
  <span id="usernameError" class="error"></span>
  
  <input type="email" id="email" name="email" placeholder="邮箱">
  <span id="emailError" class="error"></span>
  
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交
    
    // 获取表单数据
    var formData = $(this).serialize();
    
    // 发送Ajax请求
    $.ajax({
      url: 'validate.php', // 验证接口
      type: 'POST',
      data: formData,
      dataType: 'json',
      success: function(response) {
        // 清除之前的错误信息
        $('.error').text('');
        
        if (response.success) {
          // 验证通过，可以提交表单或执行其他操作
          alert('验证通过！');
          // $('#myForm').unbind('submit').submit(); // 如果需要实际提交表单
        } else {
          // 显示错误信息
          if (response.errors.username) {
            $('#usernameError').text(response.errors.username);
          }
          if (response.errors.email) {
            $('#emailError').text(response.errors.email);
          }
        }
      },
      error: function(xhr, status, error) {
        console.error('验证请求失败: ' + error);
      }
    });
  });
  
  // 实时验证（可选）
  $('#username').on('blur', function() {
    $.ajax({
      url: 'validate.php',
      type: 'POST',
      data: { username: $(this).val(), field: 'username' },
      dataType: 'json',
      success: function(response) {
        if (!response.success) {
          $('#usernameError').text(response.message);
        } else {
          $('#usernameError').text('');
        }
      }
    });
  });
});
</script>

// validate.php
header('Content-Type: application/json');

$response = ['success' => true, 'errors' => []];

// 验证用户名
if (isset($_POST['username'])) {
    if (empty($_POST['username'])) {
        $response['errors']['username'] = '用户名不能为空';
        $response['success'] = false;
    } elseif (strlen($_POST['username']) < 4) {
        $response['errors']['username'] = '用户名至少4个字符';
        $response['success'] = false;
    }
}

// 验证邮箱
if (isset($_POST['email'])) {
    if (empty($_POST['email'])) {
        $response['errors']['email'] = '邮箱不能为空';
        $response['success'] = false;
    } elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $response['errors']['email'] = '邮箱格式不正确';
        $response['success'] = false;
    }
}

// 如果是单个字段验证
if (isset($_POST['field']) && $_POST['field'] === 'username') {
    if (empty($_POST['username'])) {
        $response = ['success' => false, 'message' => '用户名不能为空'];
    } elseif (strlen($_POST['username']) < 4) {
        $response = ['success' => false, 'message' => '用户名至少4个字符'];
    } else {
        $response = ['success' => true, 'message' => '用户名可用'];
    }
}

echo json_encode($response);

var debounceTimer;
$('#username').on('input', function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(function() {
    // 发送验证请求
  }, 500); // 延迟500毫秒
});