如何防止用户使用检查元素来启用禁用的元素？

Question

我有一个按钮如下：

<input type="submit" class="button" value="FooBar" name="FooBar" id="FooBar" disabled="disabled">

我仅在满足某些参数时才启用此按钮。为了测试它是否安全，我按了 F12 （或右键单击 -> Inspect Element）并编辑了文本disabled="disabled"。这样做会覆盖我的代码，这很可怕。我怎样才能防止有人以这种方式改变它？

我在此页面中使用 php 和 jquery 并使用后者来启用或禁用该按钮。我检查了 jquery click 函数，它不仅执行，而且显示按钮未禁用。下面的警报显示已禁用： false

$("#FooBar").click(function(){
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})

那么如何防止用户更改按钮禁用状态从而覆盖我的逻辑呢？

Answer 1

您可以通过执行以下操作来禁用右键单击：

document.addEventListener('contextmenu', event => event.preventDefault());

但不建议这样做。为什么？除了烦人的用户之外，它什么也做不了

或者

或者，更好的方法是重新检查提交操作中的验证，如果失败则简单地返回，在这种情况下，如果用户检查并更改按钮的状态，该按钮将保持空闲状态并且不允许继续

$("#FooBar").click(function() {
    if (!this.acceptenceCriteria()) {
        return;
    }
    alert('Disabled: ' + $(this).is('[disabled=disabled]'));    
})