如何用jQuery AJAX完成表单预校验，校验通过后走常规表单提交流程

完全可以实现该两步流程，核心逻辑是先拦截表单默认提交流程完成异步校验，校验通过后解除拦截，触发浏览器原生的常规表单提交，完全匹配原有表单的提交规则。

实现核心逻辑 #

• 绑定表单submit事件，首次触发时调用e.preventDefault()阻断浏览器默认提交流程，避免校验未完成就跳转提交
• 收集表单字段数据，通过jQuery AJAX调用后端校验接口
• 根据校验返回结果分支处理：
  • 校验不通过：直接渲染对应错误提示，终止后续流程
  • 校验通过：移除之前绑定的submit拦截逻辑，手动触发表单原生submit事件，此时会完全按照form标签的action、method属性走常规提交；若需要自定义提交地址，可在触发提交前动态修改form的action属性即可

完整代码示例 #

基于你提供的基础表单实现，新增了错误提示容器：

<form id="checkForm" action="action_page.php" method="post">
   <div class="err-msg" style="color: #f00; margin: 8px 0;"></div>
   <input type="text" id="fname" name="fname"><br><br>
   <input type="text" id="lname" name="lname"><br><br>
   <input type="submit" value="Submit">
</form>

配套jQuery异步校验逻辑：

$(function() {
  const $form = $('#checkForm');
  const $errTip = $form.find('.err-msg');

  $form.on('submit', function(e) {
    // 拦截默认提交，先走异步校验
    e.preventDefault();
    $errTip.text('');

    // 序列化表单数据，也可以手动拼接字段
    const postData = $form.serialize();

    // 替换为实际的后端校验接口地址
    $.ajax({
      url: '/check_form_fields.php',
      type: 'POST',
      data: postData,
      dataType: 'json'
    }).then(res => {
      if (res.status !== 'success') {
        // 校验不通过，展示错误
        $errTip.text(res.message);
        return;
      }
      // 校验通过：解绑拦截事件，触发原生提交
      $form.off('submit').submit();
      // 若需自定义提交URL，可修改action后再提交：
      // $form.prop('action', 'your_custom_url.php');
      // $form.off('submit').submit();
    }).catch(() => {
      $errTip.text('校验请求异常，请稍后重试');
    });
  });
});

关键注意事项 #

• 校验通过后必须先解绑之前绑定的submit拦截事件，否则手动触发submit时仍会被preventDefault阻断，无法走正常提交流程
• 后端校验接口建议返回JSON格式结果，比如{"status":"success", "message":"校验通过"}、{"status":"fail", "message":"姓不能为空"}，便于前端快速判断处理
• 原生提交的行为完全和用户直接点击提交按钮一致，包含页面跳转、表单字段带参提交等特性，不需要额外构造提交数据
• 若需要在提交前补充自定义隐藏字段，可在校验通过后、触发原生提交前动态插入input元素即可

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