通过onsubmit和onclick进行表单输入验证之间有什么区别？
[英]Any difference between form inputs validation via onsubmit and onclick?
问题描述
I came across two types of form input validation: 
我遇到了两种类型的表单输入验证：
1) Form validation via the onclick attribute of the Submit button: 1）通过“ Submit按钮的onclick属性进行表单验证：
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script>
function validateForm() {
var first = document.forms["myForm"]["fname"].value;
var last = document.forms["myForm"]["lname"].value;
if (first.trim() == "" || last.trim() == "") {
document.getElementById("demo").innerHTML = "Name must be filled out!";
return false;
}
}
</script>
</head>
<body>
<div id="demo" style="color:red"></div><br>
<form name="myForm" action="formHandler.jsp" method="post" target="_blank">
First Name: <input type="text" name="fname"> <br>
Last Name: <input type="text" name="lname"> <br>
<input type="submit" value="Submit" onclick="return validateForm()" >
</form>
</body>
</html>
2) Form validation via the onsubmit attribute of the <form> element: 2）通过<form>元素的onsubmit属性进行表单验证：
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script>
function validateForm() {
var first = document.forms["myForm"]["fname"].value;
var last = document.forms["myForm"]["lname"].value;
if (first.trim() == "" || last.trim() == "") {
document.getElementById("demo").innerHTML = "Name must be filled out!";
return false;
}
}
</script>
</head>
<body>
<div id="demo" style="color:red"></div><br>
<form name="myForm" action="formHandler.jsp" onsubmit="return validateForm()" method="post" target="_blank">
First Name: <input type="text" name="fname"> <br>
Last Name: <input type="text" name="lname"> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The above two code examples achieve the same purpose of form validation. 上面的两个代码示例实现了表单验证的相同目的。 I am not asking the general difference between onclick and onsubmit addressed in this question: What's the difference between onclick and onsubmit? 我不是在问这个问题所解决的onclick和onsubmit之间的一般区别： onclick和onsubmit之间有什么区别？ Instead I am asking: Which one is the preferable way to validate a form? 相反，我问：验证表单的最佳方法是哪一种？ Is there any difference between the two methods? 两种方法有什么区别？
2 个解决方案
解决方案1
3 已采纳 2018-01-07 03:17:18
Yes, there is a big difference and it is the event that you have a reference to when doing your validation. 是的，有很大的不同，这是您进行验证时要参考的事件。
During onclick , you only have a reference to the click event of the submit button. 在onclick期间，您仅具有对提交按钮的click事件的引用。 If your validation fails, and you cancel the event (via event.stopPropagation() ), it may seem like you've prevented the form from submitting, but clicking the submit button is not the only way to submit a form . 如果您的验证失败，并且您取消了该事件（通过event.stopPropagation() ），则似乎您已阻止提交表单， 但是单击“提交”按钮并不是提交表单的唯一方法 。 It can also be accomplished in some cases by pressing the ENTER key, or programmatically with form.submit() , in which case your validation code would be bypassed. 在某些情况下，也可以通过按ENTER键或使用form.submit()编程来form.submit() ，在这种情况下，您的验证码将被忽略。
During the onsubmit , you have a reference to the submit event and if you cancel that, your form is not going to submit, regardless of what pathway led you to the submit event. 在onsubmit期间，您具有对submit事件的引用，并且如果您取消该提交，则无论您通过什么途径导致提交事件，都不会提交表单。 For this reason, form validation should always be done via the submit event. 因此，表单验证应始终通过submit事件完成。 And, it should also be done a second time on the server since all client-side validation can be easily bypassed by anyone who wants to do so. 并且，还应该在服务器上第二次执行此操作，因为任何想要这样做的人都可以轻松绕过所有客户端验证。
As a side note, you should not be using inline HTML event attributes like onsubmit and onclick in the first place. 附带说明一下，首先不要使用内联HTML事件属性，例如onsubmit和onclick 。 That is how we did event registration 20 years ago, but because of how easy they are to implement ( and a lack of understanding as to how they work and the issues that using them creates ), the practice persists today. 这就是20年前我们进行事件注册的方式，但是由于它们实施起来非常容易（ 并且对它们的工作方式以及使用它们所产生的问题缺乏了解 ），因此这种做法一直持续到今天。 Instead, modern standards should be used via the DOM standard of .addEventListener() . 相反，应通过.addEventListener()的DOM标准使用现代标准。
document.querySelector("form").addEventListener("submit", function(evt){ alert("Form submitted without having submit button!\\nEvent was: " + evt.type); });
<p>Click into the text box below and then press ENTER</p> <form action="#" method="GET"> <input id="test"> </form>
解决方案2
0
For example onclick refers to a specific method on jquery for example or even with vanilla javascript that can be attached to a specific button through an ID 例如，onclick指的是jquery上的特定方法，例如甚至带有可通过ID附加到特定按钮的普通javascript。
Onsubmit refers to the entire form where you can define the call to the specific function for instance: Onsubmit指的是整个表单，您可以在其中定义对特定函数的调用，例如：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.