求纯JavaScript实现表单提交后居中显示加载图片的功能

实现步骤 #

• 表单提交前完成必填字段验证
• 验证通过后生成全屏白色遮罩层，居中显示加载图片
• 遮罩层会锁定页面操作，直到后端完成重定向（页面跳转后遮罩自动消失）

代码实现 #

HTML 表单示例 #

<form id="submitForm">
  <input type="text" name="username" placeholder="用户名（必填）" required>
  <input type="password" name="password" placeholder="密码（必填）" required>
  <button type="submit">提交</button>
</form>

核心JavaScript函数 #

function setupFormLoading() {
  const form = document.getElementById('submitForm');
  
  form.addEventListener('submit', function(e) {
    // 原生必填字段验证，也可替换为自定义逻辑
    if (!form.checkValidity()) {
      e.preventDefault();
      form.reportValidity();
      return;
    }

    // 创建全屏遮罩层
    const overlay = document.createElement('div');
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    `;

    // 创建加载图片
    const loadingImg = document.createElement('img');
    loadingImg.src = '你的加载图片路径'; // 替换为实际加载图地址
    loadingImg.alt = '加载中';
    loadingImg.style.cssText = `
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    `;

    // 添加旋转动画（可选）
    const spinStyle = document.createElement('style');
    spinStyle.textContent = `
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    `;
    document.head.appendChild(spinStyle);

    // 组装遮罩并添加到页面
    overlay.appendChild(loadingImg);
    document.body.appendChild(overlay);

    // 保留表单默认提交行为，后端重定向后页面刷新，遮罩自动销毁
  });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', setupFormLoading);

自定义说明 #

• 验证逻辑：如果需要更复杂的字段校验，可替换form.checkValidity()部分，比如遍历必填字段判断是否为空
• 加载图片：将loadingImg.src替换为你的实际加载图路径（本地路径或base64编码均可）
• 样式调整：可修改遮罩层背景色、加载图尺寸、动画效果等，适配你的页面风格

内容的提问来源于stack exchange，提问作者Luca De Angelis