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

Posted 2023-02-22

【中文标题】如何在 javascript 中收听表单提交事件？

【英文标题】：How can I listen to the form submit event in javascript?

【发布时间】：2011-11-16 15:02:09

【问题描述】：

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

我想制作这个 javascript，这样我就不必触摸任何 html 代码，例如添加 onSubmit 或 onClick javascript。

【问题讨论】：

为什么不document.forms['yourForm'].onsubmit = function()？还是addEventListener？

您是否真的要检查是否单击了提交按钮，或者您是否要检查用户何时提交表单（他们可以通过单击按钮或按 Enter 从其中一个字段）？

【参考方案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，请查看this documentation on MDN。

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

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

---

使用库收听submit 事件

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

jQuery

$(ele).submit(callback);

其中ele 是表单元素引用，callback 是回调函数引用。 Reference

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

AngularJS (1.x)

<form ng-submit="callback()">

$scope.callback = function() /*...*/ ;

非常简单，其中$scope 是您的controller 内的框架提供的范围。 Reference

反应

<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 属性。 Reference

其他框架/库

请参阅您的框架的文档。

---

验证

您始终可以在 JavaScript 中进行验证，但对于 HTML5，我们也有原生验证。

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

您甚至不需要任何 JavaScript！只要不支持本机验证，您就可以回退到 JavaScript 验证器。

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

【讨论】：

那 5 行“可怕...丑陋”的代码取代了 4,000 行 jQuery 提供的所需功能，这也必须是“可怕...丑陋”的代码。

我对 jQuery 没有太多反对意见，只有那些将它用作一种魔法咒语的人，却没有意识到他们可以用几行代码替换整个东西。为什么不花时间了解浏览器的实际工作原理？真的没那么难。

@Ben - 仅仅因为您可以使用库做某事并不意味着您也应该这样做，也不应该通过回复“只使用库 x”来阻止其他人学习基础知识。当有人询问有关 javascript 的特定问题时，使用纯 javascript 回答问题是有礼貌的。无论如何，请从您选择的图书馆中提出一些建议，但回答问题应该是第一要务。

我个人认为，一个人首先应该知道基础。

本着同样的精神，我们真的应该尝试编写更多的汇编语言。半开玩笑（我更喜欢 jquery 解决方案，如果您真的想了解引擎盖下发生的事情，我认为它是一个无尽的兔子洞），但是是的，我很高兴我知道一些程序集语言，并且知道 TCP 连接是如何建立的，等等。我仍然不会仅仅为了教他们了解底层知识的奇迹而向任何人提供较低级别的解决方案。

【参考方案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();

【讨论】：

你为什么决定绑定'提交'函数？函数中没有使用“this”。

bind 确实没必要。

【参考方案3】：

根据您的要求，您还可以在不使用 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>

【讨论】：

始终使用addEventListener 而不是 onsubmit 或 onload 以允许其他开发人员添加自己的侦听器。

【参考方案4】：

使用 jQuery：

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

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