Javascript 调用preventDefault后如何提交表单数据？

我对如何控制表单中的提交事件有点困惑，我试图在这里找到一个简单的答案

我想在将表单数据发送到表单操作scrip之前验证表单输入。我试图通过捕获提交事件、使用Ajax调用验证脚本来解决这个问题，如果验证成功，我希望调用实际的表单过程。但我不知道该怎么做。仅仅使用

location.replace（“action.php”）

似乎失败了（我猜表单值没有发送）

以下是概念代码：

$（“表单”）。在（“提交”上，函数（事件）{
event.preventDefault（）；
数据={
_input_val:$（“#input_to_be_validate”）.val（）
};
$.post（“ajax\u validate\u input.php”），数据，函数（数据，状态）{
如果（状态=“成功”）{
如果（数据==“无效”）{
警报（“无效输入”）；
//表单数据未按预期发送
}否则{
//这里我想发送表单数据，但是event.preventDefault（）阻止它发生
//我应该在这里放置什么来使用表单数据调用表单的“动作”脚本？
}
}
});
});

提交
您可以使用以下方法：

if (status == "success") {
  if (data == "invalid") {
    alert("Invalid input");
    // Form data is not sent... as expected
  } else {
    event.submit();
  }
}

没有jquery，您只能在客户端检查表单数据。类似于代码片段（使用）

也就是说，最好检查表单输入服务器端。在那里（服务器）检查后，您要么处理数据（并返回成功消息），要么在接收到的数据无效时向客户端返回一些错误消息



document.addEventListener（“提交”，句柄）；
//^使用事件委派（一个处理程序用于所有事件处理）
函数句柄（evt）{
如果（evt.type==“提交”）{
//^event delegation，因此我们需要事件类型
//检测与表单提交相关的处理程序
console.clear（）；
//^以避免在本例中使控制台混乱
if（！document.querySelector（“#input_to_be_validated”）.value.trim（）.length）{
log（“您应该用一些文本填充输入”）；
//^这是用于此演示的，您可以将
//使用自己的代码警告用户字段不足
返回evt.preventDefault（）；
//^提交将不会继续
}
evt.preventDefault（）；
//^注意：在生产代码中删除此项，仅此示例
return console.log（“谢谢，你做到了”）；
//^此处将提交表格。
//因此，上述两种说法在本文中都是不必要的
//你的代码
}
}

提交
调用上的方法手动提交表单，而无需再次通过提交事件

可以通过读取
事件
对象的
目标
属性来检索表单

但是，要使此方法起作用，请丢失按钮上的
name=“submit”
值，因为这将导致尝试使用此方法提交时出错


const$form=$（“form”）；
$form.on（“提交”，功能（事件）{
event.preventDefault（）；
常数数据={
_input_val:$（“#input_to_be_validate”）.val（）
};
$.post（“ajax\u validate\u input.php”），数据，函数（数据，状态）{
如果（状态=“成功”）{
如果（数据==“无效”）{
警报（“无效输入”）；
//表单数据未按预期发送
}否则{
event.target.submit（）；
}
}
});
});

提交
为什么要验证服务器上的数据，然后将相同的数据再次发送到服务器？只需提交数据。如果数据无效，请返回原因。如果数据比您已经做的更有效。不需要发送两次相同的数据。@Andreas。。。我觉得你的评论是解决我问题的最好办法。我没有考虑过在
ajax\u validate\u表单中处理表单数据（或者至少将数据转发到
action.php
…我会尝试一下。谢谢
文档。addEventListener（“submit”，…）
？为什么
如果（evt.type==“submit”）
？为什么
控制台。clear（）
？为什么
返回控制台.log（）
？为什么
返回evt.preventDefault（）
？为什么
！document.querySelector（“#input_to_be_validation”）.value.trim（）.length
？为什么要使用JavaScript？嗯@Andreas，这是我们可以称之为的。如果您不想使用
事件.target
您可以直接将表单作为目标，例如
$（“表单”）[0]。submit（）
（注意
[0]
）