Javascript 是否可以使用表单（验证）的功能，但使用onclick发送数据？

在我的页面上，我不会使用PHP发送电子邮件（请不要评论），然后找到一个由fetch调用的外部服务解决方案。这就是我使用

onclick

功能提交表单数据的原因；这个

onclick

绑定到按钮。实际上，这个

onclick

不使用表单特性，它只是通过ID获取表单的数据

该按钮位于窗体之外。不用说，在这种情况下，我不会从诸如required和patternvalidate之类的典型表单特性中获益

有没有一种简单的方法可以让按钮通过点击发送数据并触发表单验证？所谓表单验证，我指的是通常的内部HTML

---

验证。当然，我可以在

onclick

函数体中开发验证，但这不是我想要的-我想使用表单的功能来代替它。

您需要将提交按钮重新放到表单中，以便利用所有这些内置功能，然后您将在表单上使用

submit

事件，然后利用，如下所示：

// HTML

<form id="form">
    <!-- inputs go here... -->
    <button type="submit">Submit</button>
</form>

// JavaScript

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {

    // prevents default submission so we can do our magic
    e.preventDefault();

    // build request
    const formData = new FormData(form);

    fetch('some/endpoint', {
        method: 'post',
        body: new URLSearchParams(formData),
    });

    // do something else...

});

//HTML
提交
//JavaScript
const form=document.querySelector（'form'）；
表格.addEventListener（'submit'，（e）=>{
//防止默认提交，这样我们就可以发挥我们的魔力
e、 预防默认值（）；
//构建请求
const formData=新的formData（form）；
fetch（'some/endpoint'{
方法：“post”，
正文：新的URLSearchParams（formData），
});
//做点别的。。。
});

---

这些都是现代的最佳实践，但兼容性不强。您可能需要查看

XMLHttpRequest

而不是

fetch

，甚至在表单元素中循环而不是使用

FormData

，但这应该会让您找到正确的方向。

请插入您的答案！没有代码就很难帮助你谢谢你。看起来不错，下午我会测试一下。这样可以避免使用onclick，正如我看到的，它与type='submit'冲突。是的，看起来很有希望