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

Question

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

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

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

Answer 1

这是最简单的方法，您可以在onSubmit发生时调用自己的javascript函数。HTML<form> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="name"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="submit"&nbsp;name="submit"></form>JavaScript的window.onload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form&nbsp;=&nbsp;document.querySelector("form"); &nbsp;&nbsp;&nbsp;&nbsp;form.onsubmit&nbsp;=&nbsp;submitted.bind(form);}function&nbsp;submitted(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();}

Answer 2

根据您的要求，您也可以在没有像jQuery这样的库的情况下执行以下操作：把它添加到你的头脑中：window.onload&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("frmSubmit").onsubmit&nbsp;=&nbsp;function&nbsp;onSubmit(form)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;isValid&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//validate&nbsp;your&nbsp;elems&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isValid&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!isValid)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("Please&nbsp;check&nbsp;your&nbsp;fields!"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//you&nbsp;are&nbsp;good&nbsp;to&nbsp;go &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}你的表单可能看起来像：&nbsp;&nbsp;&nbsp;&nbsp;<form&nbsp;id="frmSubmit"&nbsp;action="/Submit"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="submit"&nbsp;value="Submit"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</form>