监听表单提交事件有4种主要方式：1.使用onsubmit属性，在html表单元素上直接设置，通过return false阻止默认提交；2.使用addeventlistener方法绑定submit事件，通过event.preventdefault()阻止默认行为，支持多个监听器；3.将处理函数单独定义后通过addeventlistener绑定，提升代码可维护性；4.使用jquery的.submit()方法，语法简洁但依赖jquery库。每种方式均需阻止默认提交以实现自定义逻辑，如数据验证或ajax提交。
监听表单提交事件，本质上就是要在用户点击提交按钮或者按下回车键时，执行我们预先设定的JavaScript代码。实现方式多种多样，各有优劣，关键在于选择最适合你项目场景的方法。
表单提交监听的4种实现方式详解
解决方案
主要有四种方法可以监听表单提交事件：
-
使用
onsubmit属性： 这是最直接的方式，直接在HTML表单元素上设置onsubmit属性，指定一个JavaScript函数。注意
return false的作用，它可以阻止表单的默认提交行为，允许你完全控制提交过程。 -
使用
addEventListener方法： 这种方式更灵活，可以将多个事件监听器绑定到同一个表单元素上。const form = document.getElementById('myForm'); form.addEventListener('submit', function(event) { // 处理表单提交的逻辑 console.log("表单已提交！"); event.preventDefault(); // 阻止表单默认提交行为 });event.preventDefault()与return false的作用相同，都是阻止表单的默认提交行为。addEventListener允许你添加多个监听器，而不会像onsubmit那样互相覆盖。 -
使用
form元素的submit事件： 与addEventListener类似，但更专注于submit事件本身。const form = document.getElementById('myForm'); form.addEventListener('submit', handleSubmit); function handleSubmit(event) { event.preventDefault(); console.log('表单提交了'); // 可以在这里进行数据验证和提交操作 }这种方式的好处在于，你可以将处理函数单独定义，代码更清晰。
-
使用jQuery（如果你的项目使用了jQuery）： jQuery提供了更简洁的语法来处理事件。
$( "#myForm" ).submit(function( event ) { console.log( "表单已提交！" ); event.preventDefault(); });这种方式依赖于jQuery库，如果你的项目已经引入了jQuery，使用这种方式可以减少代码量。
如何阻止表单的默认提交行为？
阻止表单默认提交行为至关重要，尤其是在你需要使用AJAX提交表单数据时。 如果不阻止，浏览器会尝试跳转到action属性指定的URL，导致页面刷新。 前面已经提到，可以使用return false (在onsubmit属性中) 或 event.preventDefault() (在addEventListener中) 来阻止。 选择哪种方式取决于你使用的监听方式。
如何在表单提交前进行数据验证？
表单提交前的数据验证是必不可少的，可以避免无效数据提交到服务器。 你可以在提交事件的处理函数中进行验证。
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交
const username = document.querySelector('input[name="username"]').value;
if (username.trim() === '') {
alert('用户名不能为空！');
return; // 停止提交
}
// 其他验证逻辑...
// 如果验证通过，则提交表单数据（例如使用AJAX）
console.log('验证通过，可以提交数据了！');
});这段代码演示了如何验证用户名是否为空。 你可以根据实际需求添加更多的验证逻辑，例如验证邮箱格式、密码强度等。 如果验证失败，就阻止表单提交，并给出相应的提示。
如何使用AJAX提交表单数据？
使用AJAX提交表单数据可以实现无刷新提交，提升用户体验。
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交
const formData = new FormData(form); // 创建FormData对象
fetch('/submit-form', { // 替换为你的服务器端点
method: 'POST',
body: formData
})
.then(response => response.json()) // 假设服务器返回JSON数据
.then(data => {
console.log('提交成功！', data);
// 处理服务器返回的数据
})
.catch(error => {
console.error('提交失败！', error);
// 处理错误
});
});这段代码使用fetch API 发送POST请求，将表单数据以FormData格式发送到服务器。 FormData 可以方便地收集表单数据，包括文件上传。 你需要替换/submit-form 为你的服务器端点，并根据服务器返回的数据进行相应的处理。 确保你的服务器端能够正确处理FormData格式的数据。 如果你的服务器端需要特定的数据格式（例如JSON），你可能需要手动将FormData转换为JSON字符串。
