前端监听表单提交的JS

前端监听表单提交的JavaScript通常通过事件处理机制完成。你可以使用HTML的`onsubmit`属性或者addEventListener方法来实现。以下是两个例子：

1. **使用HTML的`onsubmit`属性**:

<form id="myForm" onsubmit="event.preventDefault(); submitForm();">
   <!-- 表单内容 -->
   <button type="submit">提交</button>
</form>

<script>
function submitForm() {
   // 在这里添加表单验证和数据发送逻辑
   // 如果一切正常，再触发默认的提交操作
   document.getElementById('myForm').submit();
}
</script>

在这个例子中，当用户点击提交按钮时，`submitForm()`函数会被调用。首先阻止了表单的默认提交行为，然后你可以在此函数中进行必要的验证和数据处理。

2. **使用`addEventListener`方法**:

document.getElementById('myForm').addEventListener('submit', function(event) {
   event.preventDefault(); // 阻止默认提交
   if (validateForm()) { // 检查表单是否合法
       sendData(); // 发送数据
       this.submit(); // 手动提交表单
   }
});

// 辅助函数
function validateForm() {
   // 这里检查表单输入等
   return true; // 返回true表示表单有效
}

function sendData() {
   // 这里处理数据发送逻辑
}

在这里，我们通过`addEventListener`绑定了一个'click'事件处理器，在提交前先验证表单并执行相应的逻辑。