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

我想编写自己的表单验证javascript库，并且一直在google上寻找如何检测是否单击了提交按钮，但是我发现的只是代码，您必须onSubmit="function()"在html中使用onClick on 。

我想制作此javascript，以便不必触摸任何html代码，例如添加onSubmit或onClick 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
}

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

关于EventTarget.addEventListener，请查阅有关MDN的文档。

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

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

听着 submit用库事件

如果出于某种原因您决定需要一个库（您已经在使用一个库，或者不想处理跨浏览器的问题），则可以使用以下方法在普通库中侦听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/

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

根据您的要求，您还可以在没有jQuery之类的库的情况下执行以下操作：

将此添加到您的头上：

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

而且您的表格可能仍然看起来像：

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

使用jQuery：

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

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