如何防止我的表单操作（html）通过javascript执行？

TL；DR我只想知道如何（有条件地）停止使用javascript执行表单操作

我创建了一个html页面，当您单击“提交”按钮时，该页面会将您重定向到/game.html：

<form class = "initial-form" action = "/game.html">
    <!--a bunch of input elements-->
    <button type = "submit" value = submit id = "go-button">Go</button>
</form>

我知道这很难理解，但是“validate player”是对后端（节点中）的一个请求，用于检查player属性是否都有效。后端随后将发出“validate player client”，发送具有“approved”属性或“error”属性的对象。当返回具有错误属性的对象时，我想停止表单操作导航到/game.html。我该怎么做

---

谢谢大家

您可以使用

onSubmit（）

并根据您的情况返回

true

或

false

。

函数onSubmit（）{
if（document.form.name.value==“”）{
console.log（'invalid'）；
返回false；
}否则{
console.log（'valid'）；
返回true；
}
}

检查

使您的按钮不是“提交”按钮，并将其移到表单外部

<form class="initial-form" id="theForm" action="/game.html">
    <!--a bunch of input elements-->
</form>
<button type="button" id="go-button">Go</button>

---

submit events preventDefault方法应该有帮助我想阻止表单操作在socket.on（'validate-player-client'）上执行。这难道不意味着我没有访问事件参数的权限吗？如果您正在等待的是异步的，那么您必须重新考虑您的代码，以始终防止表单提交，并在验证时“以编程方式”执行提交-当然，将调用相同的onsubmit代码，因此您需要以巧妙的方式，如果您使按钮不是提交按钮，那么很容易在javascript中模拟action='/game.html'？不幸的是，停止表单操作的函数需要等待从后端发出事件（即，按钮单击向服务器发送请求；决定是否停止或允许表单操作的函数等待服务器的响应）。我想我不能用你的方式阻止它。

<form class="initial-form" id="theForm" action="/game.html">
    <!--a bunch of input elements-->
</form>
<button type="button" id="go-button">Go</button>

const $send = document.getElementById('go-button');
// make this button NOT
const form = document.getElementById('theForm');

$send.addEventListener('click', e => {
    const player = {
        roomName: "",
        username: ""
    }
    //populate player
    const joinOption = document.querySelector('input[name="join-option"]:checked').value
    player.roomName = $roomname.value
    player.username = $username.value
    socket.emit('validate-player', player, joinOption)
}

socket.on('validate-player-client', (res)=>{
    console.log(res)

    if(res.error){
        alert('Error: ', res.error);
    }
    else if (res.approved){
        form.submit();
    }
    else {
        // do something else here I guess
    }
})