如何防止用户向按钮发送垃圾邮件？答案

【问题标题】：How can I prevent users from spamming a button?如何防止用户向按钮发送垃圾邮件？
【发布时间】：2020-03-30 16:04:49
【问题描述】：

我正在处理一个 ASP.NET MVC 项目，我需要以某种方式隐藏或禁用一个按钮。该按钮用于提交数据库中的一行。

<div class="form-group">
            <div class="col-lg-2">
                <input type="submit" id="btn" value="Efetuar Picagem" class="btn-danger" 
                style="width:300%" onclick="javascript: return ShowMessage();" />
            </div>
        </div>

我正在使用此脚本来验证提交。之后，我想在单击后禁用或隐藏此按钮。

<script>
    function ShowMessage() {
        ShowMessage.preventDefault();
        var result = confirm("Deseja efetuar picagem?");
        if (result) {



            return true;




        }

        else {
            return false;

        }


    }

</script>

【问题讨论】：

javascript: 没用
ShowMessage.preventDefault(); 没有意义，函数不是事件对象
这能回答你的问题吗？ Disabling the button after once click

标签： javascript c# html asp.net-mvc

【解决方案1】：

您不应该使用内联事件或样式，因为这不符合 MVC 原则，并且会使您的代码难以扩展（向您的项目添加更多按钮和功能）。我将 CSS 中的样式（您需要 link tag）和 JS 中的事件处理（使用 addEventListener）分开（您需要 script tag）。

我没有隐藏，而是添加了一些透明度来表明该按钮已被禁用。

您需要事件参数才能调用preventDefault

/* yourScript.js */

var btn = document.getElementById('submit-btn');

function showMessage(event) {
  event.preventDefault(); // prevents the form submission
  var result = confirm("Deseja efetuar picagem?");
  btn.disabled = result;
}

btn.addEventListener('click', showMessage);

/* yourStyle.css */

.btn-danger {
  padding: 1em 4em;
}
.btn-danger[disabled] {
  opacity: 0.3;
}

<!-- css should be added first to prevent frames with no style 
<link href="/path/yourStyle.css" rel="stylesheet">
-->
<div class="form-group">
  <div class="col-lg-2">
    <input type="submit" id="submit-btn" value="Efetuar Picagem" class="btn-danger"/>
  </div>
</div>
<!-- js should be added after your DOM elements
<script src="/path/yourScript.js">
-->

【讨论】：

【解决方案2】：

过去（现在可能有更合适的方法），我将按钮的 onClick 设置为$(#btn).prop('disabled', true); setTimeout(ShowMessage, 100);，完成后不要忘记启用按钮。

【讨论】：

【解决方案3】：

这应该可以解决问题。

<input type="submit" id="btn" value="Efetuar Picagem" class="btn-danger" 
                style="width:300%" onclick="submit(this);" />

<script>
    var wasSubmited = false;

    function submit(button) {
        if(!wasSubmited){
            //Submit

            //disable button
            button.setAttribute("disabled", "");
            wasSubmited = true;

            //stop function
            return;
        }

        //Show message that it was already submited

    }
</script>

【讨论】：