如何防止用戶向按鈕發送垃圾郵件？

Question

我正在處理一個 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>

Answer 1

過去（現在可能有更合適的方法），我已將按鈕的 onClick 設置為$(#btn).prop('disabled', true); setTimeout(ShowMessage, 100); $(#btn).prop('disabled', true); setTimeout(ShowMessage, 100); ，不要忘記在完成后啟用該按鈕。

Answer 2

您不應該使用內聯事件或樣式，因為這不符合 MVC 原則，並且會使您的代碼難以擴展（向您的項目添加更多按鈕和功能）。 我將 CSS 中的樣式（您將需要一個 鏈接標簽）和 JS 中的事件處理（使用addEventListener ）分開（您將需要一個腳本標簽）。

我沒有隱藏，而是添加了一些透明度來傳達該按鈕已被禁用。

您需要事件參數才能調用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"> -->

Answer 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>