前端学习(1): 介绍一种防止表单重复提交的方法及2种样式

准备深入学习一下前端并计划每周至少写一篇关于前端的文章。

本文创意来自文章 HTML Forms: How (and Why) to Prevent Double Form Submissions^[1]，下文是我按照自己的理解进行的转述。

究其本质，前端防止表单重复提交的方式，大概是给表单绑定一个标识变量，表单提交时将其锁定、提交成功或失败后再释放。对于重复的提交操作，都在提交前判断标识变量是否锁定，如果锁定，则不予提交。

我们把关注点放在样式展现上(毕竟我是在学习前端)，假设表单的初始状态是这样的：

点击提交后，我们要的效果是把整个表单置灰，并显示一个 Spinner：

因为涉及到表单提交的拦截操作，一些 JavaScript 代码是不可少的：

// 防止重复提交
document.querySelectorAll('form').forEach((form) => {
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // 如果表单提交过，则含有 is-submitting 这个类
        if (form.classList.contains('is-submitting')) {
            console.info('Successive submit suppressed');
            // 不再进行后续操作
            return;
        }

        // 再发送 ajax 请求前锁定表单
        form.classList.add('is-submitting');
        // ajax();
    });
});

整个代码比较容易理解，见注释。

接下来是 css 部分：

初始的表单样式代码按如下定义：

form {
 position: relative;
 display: inline-block;
}

当 form 在锁定状态(is-submitting) 时，加上置灰的背景和 Spinner：

form.is-submitting::after {
 position: absolute;
 content: '';
 top: -0.5em;
 right: -0.5em;
 left: -0.5em;
 bottom: -0.5em;
 background: rgba(0,0,0,0.2) url('/spinner.png') no-repeat 50% 50% / 1em 1em;
}

结合两个样式，可以看到：

将 form 设置为 relative 定位，是为了服务于之后的锁定状态 (::after)。
四个方位(top、right、left、bottom)设置为负值，是为了在覆盖表单区域的基础上，再往外延伸 0.5em，这样更好看一些。
background 部分，比较难理解的是 50% 50% / 1em 1em，我查了文档后才知道，它分别表示 background_position 和 background_size (即在本例中是 Spinner 的位置和尺寸)

以上是第一种方式。如果你不喜欢在提交时将整个表单置灰，还可以只置灰提交按钮。

样式2：仅置灰提交按钮

这个方案下，JavaScript 部分是不变的，主要是 css 样式部分有调整。

表单在提交前和提交时，样式表现分别如下：

而 css 代码如下：

form button[type="submit"] {
 position: relative;
 overflow: hidden;
 background-color: rgba(0,128,0,1);
 color: white;
 border: 0;
 padding: 0.5em 0.7em;
}

form.is-submitting button[type="submit"] {
 background-color: rgba(0,128,0,0.7);
 outline: 0;
}

form.is-submitting button[type="submit"]::before {
 position: absolute;
 content: '';
 height: 0.2em;
 left: 0;
 right: 0;
 top: 0;
 background: green;
 animation: move 1s linear infinite; 
}

@keyframes move {
 0% {
  transform: translateX(-100%);
 }
 100% {
  transform: translateX(100%);
 }
}