我想编写我自己的表单验证 javascript 库，我一直在 google 上寻找如何检测提交按钮是否被点击，但我发现的只是你必须onSubmit="function()"在 html 中使用 onClick on 的代码。
我想制作这个 javascript，这样我就不必接触任何 html 代码，比如添加 onSubmit 或 onClick javascript。
如何在javascript中收听表单提交事件？
IT技术
javascript
forms
validation
2021-01-15 05:58:43
4个回答
为什么人们总是在不需要的时候使用 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用图书馆收听事件
如果出于某种原因您决定需要一个库（您已经在使用一个库或者您不想处理跨浏览器问题），以下是在公共库中侦听提交事件的方法列表：
jQuery
$(ele).submit(callback);ele表单元素引用在哪里，是callback回调函数引用。参考
AngularJS (1.x)
<form ng-submit="callback()"> $scope.callback = function(){ /*...*/ };react
<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 }只需将处理程序传递给
onSubmitprops。参考其他框架/库
请参阅您的框架的文档。
验证
您始终可以使用 JavaScript 进行验证，但使用 HTML5 我们也可以进行本机验证。
<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">
您甚至不需要任何 JavaScript！每当不支持本机验证时，您可以回退到 JavaScript 验证器。
这是您可以在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;
});