求助：基于jQuery实现通用表单提交按钮加载状态的可复用函数

要做一个能在所有表单里复用的加载状态功能，用jQuery可以封装成通用逻辑，自动处理表单提交时的按钮状态，还能兼顾表单验证和自定义需求，不用每个表单都写重复代码。

实现思路 #

• 自动给页面所有表单绑定提交事件，无需手动逐个添加
• 自动识别表单内的提交按钮（支持自定义选择器）
• 先保存按钮原始文本和状态，提交时切换为加载样式
• 先校验HTML5表单验证是否通过，未通过则不触发加载状态
• 提供按钮状态恢复方法，适配AJAX提交场景

完整代码示例 #

JavaScript 通用函数

$(function() {
  // 可自定义配置项，按需修改
  const config = {
    submitBtnSelector: '.btn-sabt', // 提交按钮的类选择器
    loadingIconClass: 'fa fa-refresh fa-spin', // 加载图标样式
    loadingText: '提交中...' // 加载状态显示文本
  };

  // 给所有表单绑定提交事件
  $('form').on('submit', function(e) {
    const $form = $(this);
    const $submitBtn = $form.find(config.submitBtnSelector);

    // 未找到指定按钮的表单直接跳过
    if (!$submitBtn.length) return;

    // 校验HTML5表单验证是否通过
    if (!$form[0].checkValidity()) {
      return;
    }

    // 保存按钮原始状态，用于后续恢复
    $submitBtn.data('originalText', $submitBtn.text().trim());
    $submitBtn.data('originalDisabled', $submitBtn.prop('disabled'));

    // 设置加载状态
    $submitBtn.prop('disabled', true);
    // 替换按钮内容为加载图标+提示文本
    $submitBtn.html(`<i class="${config.loadingIconClass}"></i> ${config.loadingText}`);
  });

  // 按钮状态恢复方法（AJAX提交完成后调用）
  window.restoreSubmitBtn = function(formSelector) {
    const $form = $(formSelector || 'form');
    const $submitBtn = $form.find(config.submitBtnSelector);
    if (!$submitBtn.length) return;

    // 恢复按钮原始状态
    const originalText = $submitBtn.data('originalText');
    const originalDisabled = $submitBtn.data('originalDisabled');
    
    $submitBtn.html(originalText);
    $submitBtn.prop('disabled', originalDisabled);
  };
});

HTML 示例（适配原有结构）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- 表单1 -->
<form id="MobileUserForm" method="post">
  <div class="form-group">
    <input asp-for="Mobile" type="number" class="form-control" required />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">保存</button>
  </div>
</form>

<!-- 表单2，直接复用逻辑 -->
<form id="EmailForm" method="post">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="输入邮箱" required />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">提交</button>
  </div>
</form>

使用说明 #

1. 自动生效：页面加载完成后，所有<form>元素会自动绑定逻辑，无需手动调用函数
2. 验证兼容：只有表单HTML5验证通过（必填项已填、格式正确等），才会触发按钮加载状态
3. AJAX适配：如果是AJAX提交表单，在请求完成（成功/失败）后调用restoreSubmitBtn('#表单ID')即可恢复按钮状态
4. 自定义配置：若按钮类不是.btn-sabt，或需要更换加载图标/文本，直接修改config中的参数即可
5. 原有代码兼容：你之前使用的.btn-sabt类和Font Awesome图标可直接复用，无需大量修改原有HTML

AJAX提交示例 #

如果采用AJAX提交表单，可参考以下代码：

$('#MobileUserForm').on('submit', function(e) {
  e.preventDefault(); // 阻止默认页面跳转
  const $form = $(this);

  // 发送AJAX请求
  $.post($form.attr('action'), $form.serialize())
    .done(function() {
      alert('提交成功！');
    })
    .fail(function() {
      alert('提交失败，请重试！');
    })
    .always(function() {
      // 无论请求成败，恢复按钮状态
      restoreSubmitBtn('#MobileUserForm');
    });
});

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