表单验证中，SweetAlert点击Continue后如何执行后续验证规则？

核心问题在于原代码中SweetAlert的弹窗是异步操作，then回调里的return无法影响外部的表单提交逻辑——当弹窗弹出时，submit函数已经继续执行后续代码了。要实现"用户点击Continue后再执行规则4"的需求，需要先阻止表单默认提交，再用异步流程控制按顺序执行验证步骤。

步骤1：阻止表单默认提交 #

首先在submit事件中先阻止默认提交行为，避免表单直接提交，同时保存表单引用用于后续手动提交：

$("#SubmitForm").submit(function(event) {
  // 阻止默认提交逻辑
  event.preventDefault();
  const form = this;
  
  // 启动异步验证流程
  validateForm(form);
});

步骤2：用异步流程控制验证顺序 #

可以用async/await简化异步逻辑（环境支持ES8+即可），让验证步骤按顺序等待用户交互完成：

async function validateForm(form) {
  // 规则1验证
  if (Condition check 1) {
    await Swal.fire({
      title: 'Attention!',
      text: "Warning Text1",
      icon: 'warning',
      confirmButtonColor: '#3085d6',
      confirmButtonText: 'Return'
    });
    return; // 验证不通过，终止流程
  }

  // 规则2验证
  if (Validation Rule 2) {
    await Swal.fire({
      title: 'Attention',
      icon: 'error',
      html: 'Notify user for possible problem',
      showCloseButton: false,
      focusConfirm: false,
      confirmButtonColor: '#3085d6',
      confirmButtonText: 'Return'
    });
    return; // 验证不通过，终止流程
  }

  // 规则3验证：等待用户选择
  if (Validation Rule 3) {
    const result = await Swal.fire({
      title: 'Attention',
      icon: 'warning',
      html: 'Warning Msg with options menu',
      showCloseButton: false,
      reverseButtons: true,
      focusConfirm: true,
      confirmButtonColor: '#3085d6',
      cancelButtonText: 'Cancel',
      showCancelButton: true,
      confirmButtonText: 'Continue',
    });

    if (!result.isConfirmed) {
      return; // 用户取消，终止流程
    }
    // 用户点击Continue，继续执行后续验证
  }

  // 规则4验证
  if (Validation Rule 4) {
    await Swal.fire({
      // 规则4的弹窗配置
    });
    return; // 验证不通过，终止流程
  }

  // 所有验证通过，手动提交表单
  form.submit();
}

关键说明 #

• async/await让异步弹窗的等待逻辑更接近同步代码，可读性更强；
• 每一步验证不通过时直接return终止流程，用户确认规则3后才会进入规则4的判断；
• 所有验证通过后，通过form.submit()手动提交表单（因为之前已经阻止了默认提交）。

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