使用$.ajax jquery提交的Bootstrap 4验证表单

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<form id="myForm" method="post">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email" name="email" required>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

$(document).ready(function() {
  $('#myForm').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    if ($('#myForm')[0].checkValidity()) {
      // 表单验证通过
      var formData = $(this).serialize(); // 序列化表单数据

      $.ajax({
        url: 'your_server_url',
        type: 'POST',
        data: formData,
        success: function(response) {
          // 处理成功响应
        },
        error: function(xhr, status, error) {
          // 处理错误响应
        }
      });
    } else {
      // 表单验证失败，显示错误信息
      $('#myForm').addClass('was-validated');
    }
  });
});