如何监听 javascript 中的表单提交事件？

为什么人们总是在没有必要的时候使用jQuery？
为什么人们不能只使用简单的JavaScript？

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

回调是要在提交表单时调用的函数。

关于 ，请查看 MDN 上的此文档。EventTarget.addEventListener

要取消本机事件（阻止提交表单），请在回调函数中使用 .preventDefault（），submit

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

使用库收听事件submit

如果由于某种原因，您决定需要一个库（您已经在使用一个库，或者您不想处理跨浏览器问题），下面列出了在常见库中侦听提交事件的方法：

1. jQuery

   $(ele).submit(callback);
   

   其中 是表单元素引用，并且是回调函数引用。参考elecallback

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS （1.x）

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };
   

   非常简单，控制器内部的框架提供的范围在哪里。参考$scope

3. 反应

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }
   

   只需将处理程序传递给道具即可。参考onSubmit

4. 其他框架/库

   请参阅框架的文档。

验证

你总是可以在JavaScript中进行验证，但是对于HTML5，我们也有原生验证。

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

你甚至不需要任何JavaScript！每当不支持本机验证时，都可以回退到 JavaScript 验证器。

演示：http://jsfiddle.net/DerekL/L23wmo1L/

这是最简单的方法，你可以在发生时调用自己的javascript函数。onSubmit

断续器

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}