如何在javascript中收听表单提交事件? [英] How can I listen to the form submit event in javascript?

问题描述

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

I wanna write my own form validation javascript library and I've been looking on google how to detect if a submit button is clicked but all I found is code where you have to use onClick on onSubmit="function()" in html.

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

I would like to make this javascript so that I don't have to touch any html code like adding onSubmit or onClick javascript.

推荐答案

为什么人们总是在不需要的时候使用 jQuery?
为什么人们不能只使用简单的 JavaScript?

Why do people always use jQuery when it isn't necessary?
Why can't people just use simple 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 是您要在提交表单时调用的函数.

callback is a function that you want to call when the form is being submitted.

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

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

To cancel the native submit event (prevent the form from being submitted), use .preventDefault() in your callback function,

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

<小时>

使用库收听 submit 事件

如果由于某种原因你决定需要一个库(你已经在使用一个库或者你不想处理跨浏览器的问题)，这里有一个列表来监听提交事件公共图书馆:

---

Listening to the submit event with libraries

If for some reason that you've decided a library is necessary (you're already using one or you don't want to deal with cross-browser issues), here's a list of ways to listen to the submit event in common libraries:

1. jQuery

1. jQuery

$(ele).submit(callback);

其中 ele 是表单元素引用，callback 是回调函数引用.参考

Where ele is the form element reference, and callback being the callback function reference. Reference

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

1. AngularJS (1.x)

1. AngularJS (1.x)

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

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

非常简单，其中 $scope 是您的 内的框架提供的范围控制器.参考

Very straightforward, where $scope is the scope provided by the framework inside your 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 道具.参考

Simply pass in a handler to the onSubmit prop. Reference

其他框架/库

请参阅您的框架的文档.

Refer to the documentation of your framework.

<小时>

验证

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

---

Validation

You can always do your validation in JavaScript, but with HTML5 we also have native validation.

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

您甚至不需要任何 JavaScript！如果不支持原生验证，您可以回退到 JavaScript 验证器.

You don't even need any JavaScript! Whenever native validation is not supported, you can fallback to a JavaScript validator.

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

这篇关于如何在javascript中收听表单提交事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！