it-swarm.cn

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

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

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

106
ed1t

请参阅 Derek的答案 ,现在应该是接受的答案。它包括这个答案所包含的一切以及更多。

(我试图删除这个答案后Derek更新他的包含库示例,但使用绿色复选标记,SO不会让我)

13
Ben Lee

为什么人们总是在没有必要时使用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>
  1. AngularJS(1.x)

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

    非常简单,其中$scope是您的 controller 中框架提供的范围。 参考

  2. 应对

    <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 prop。 参考

  3. 其他框架/库

    请参阅框架的文档。


验证

您始终可以使用JavaScript进行验证,但使用HTML5我们也可以进行本机验证。

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

你甚至不需要任何JavaScript!每当不支持本机验证时,您都可以回退到JavaScript验证程序。

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

441
Derek 朕會功夫

这是发生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();
}
6
Derek Dawson

根据您的要求,您也可以在没有像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>
2
HEDWIN