如何在javascript中收听表单提交事件？

Question

我想写自己的表单验证javascript库,我一直在谷歌上查看如何检测是否点击了提交按钮,但我找到的只是代码,你必须onSubmit="function()"在html中使用onClick .

我想制作这个javascript,以便我不必触摸任何HTML代码,如添加onSubmit或onClick javascript.

Answer 1

为什么人们总是在没有必要时使用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
}

callback 是在提交表单时要调用的函数.

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

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

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

submit用图书馆听取活动

如果由于某种原因你已经决定了一个库是必要的(你已经使用了一个或者你不想处理跨浏览器的问题),这里有一个方法列表来监听公共库中的提交事件:

1. jQuery的

   $(ele).submit(callback);
   

   ele表单元素引用在哪里,并且callback是回调函数引用.参考

    <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/

Answer 2

这是onSubmit发生事件时调用自己的javascript函数的最简单方法。

的HTML

<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();
}

Answer 3

使用 jQuery：

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});