后端(tp6)

表单令牌，感觉不好用。鸡肋，特别是ajax提交表单的时候，由于页面本身就不会更新，导致token更新不及时，无法提交。

前端限制(推荐)

标志控制

假如你是通过回车提交表单，那么只能用这种

按钮不可点击

是通过按钮提交的话，可以用这个方法

遮罩层

这个同样是不能处理回车提交表单，需要再使用标志控制结合使用。我个人是喜欢用这种方式，这种方式，用户体验好一点，会给用户展示网络请求的状态

分别给每次请求单独设置(推荐)

因为不是所有的网络请求都是需要这个遮罩层的，一般只用于表单提交请求。这样控制比较灵活

下面是全局给jquery给一个提示

只要是用jquery发送ajax请求就会给出遮罩层

$.ajaxSetup({
    timeout: 30000, //超时时间:30秒
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    beforeSend: function (xhr) {
        if ($('.mask').length == 0) {
            let fdsf = `
                <div class="mask">
            <div style="color: #f4696b" class="la-line-spin-fade-rotating la-2x">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        `;
            $(fdsf).prependTo('body');
        }
    },

    //请求完毕事件
    complete: function (xhr, status) {
        //不管请求成功还是失败，都把这个遮罩层给删除
        $('.mask').remove();

        //超时timeout,还有success,error等值的情况
        if (status === 'timeout') {
            xhr.abort()// 超时后中断请求
            Toast.fire({
                icon: 'error',
                title: "请求超时~"
            });
        } else {
            let text = xhr.responseText;
            if (isJSON(text)) {
                let res = JSON.parse(text);
                if (res.code === 419) {
                    Toast.fire({
                        icon: 'error',
                        title: res.msg
                    });
                }
            }
        }
    }
});

标志控制和按钮不可点击代码延时

根据业务情况，可以自己改改

//验证码发送标志
        let send_flag = false;
        //发送验证码触发点击事件
        $('.send-btn').on('click', function () {

            //当前按钮jq对象
            let $send_btn = $(this);

            if (send_flag) return;
            send_flag = true;

            //让按钮不可点击
            $send_btn.attr('disabled', true);

            //获取表单序列化数据
            let data = $('.form').serialize();

            //发送ajax发送邮箱验证码
            $.ajax({
                url: "<{url('/validate/email/send')}>",
                type: 'POST',
                data,
                dataType: 'json',
                success: function (res) {
                    //标志恢复
                    send_flag = false;
                    //让按钮可以点击
                    $send_btn.attr('disabled', false);
                }
            })

        });

总结

同时推荐，所有的表单提交都通过ajax来完成，原因是，如果是传统的表单提交，那么后端验证不通过，就会再次返回添加页面(页面进行了跳转)，如果不处理已填数据的回显，那么如果表单特别多的情况下，用户会非常反感。

所以，我们推荐用ajax的提交方式，验证不通过，直接js提示。

thinkphp6表单重复提交解决办法