Javascript 通过onsubmit和onclick进行表单输入验证之间有什么区别吗？_Javascript_Html

Javascript 通过onsubmit和onclick进行表单输入验证之间有什么区别吗？

javascript html

Javascript 通过onsubmit和onclick进行表单输入验证之间有什么区别吗？,javascript,html,Javascript,Html,我遇到了两种表单输入验证： 1）通过Submit按钮的onclick属性进行表单验证： <!DOCTYPE html> <html> <head> <title>form</title> <script> function validateForm() { var first = document.forms["myForm"]["fname"].value; var last = document.for

我遇到了两种表单输入验证：

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>

以上两个代码示例实现了表单验证的相同目的。我不是在问这个问题中提到的

onclick

和

onsubmit

之间的一般区别：而是在问：哪一种方法更适合验证表单？这两种方法有什么区别吗

例如，onclick指的是jquery上的特定方法，例如，甚至是可以通过ID附加到特定按钮的普通javascript

Onsubmit指的是整个表单，您可以在其中定义对特定函数的调用，例如：

是的，有很大的区别，在进行验证时，您可以引用该事件

在单击

onclick

期间，您只能参考提交按钮的

单击事件。如果验证失败，并且您取消了事件（通过event.stopPropagation（）
），则可能看起来您阻止了表单提交，但是单击提交按钮并不是提交表单的唯一方法。在某些情况下，也可以通过按ENTER键或使用form.submit（）
以编程方式完成，在这种情况下，验证代码将被忽略
在onsubmit
期间，您有一个对submit
事件的引用，如果您取消该引用，您的表单将不会提交，无论您通过何种途径提交事件因此，表单验证应始终通过submit
事件进行。而且，还应在服务器上进行第二次验证，因为任何人都可以轻松绕过所有客户端验证
作为补充说明，您首先不应该使用诸如onsubmit
和onclick
之类的内联HTML事件属性。20年前我们就是这样进行事件注册的，但由于它们很容易实现（），这种做法一直持续到今天。相反，应该通过的DOM标准使用现代标准

document.querySelector（“表单”）.addEventListener（“提交”，函数（evt）{
警报（“提交的表单没有提交按钮！\n事件为：+evt.type”）；
});
单击下面的文本框，然后按ENTER键
检查表单的可能输出副本。它们的不同之处在于，无需单击“提交”按钮即可提交表单。请参阅下面我的答案，其中明确说明了这一点。这并不能解释为什么使用onclick
比onsubmit
更好/更差。它只是陈述了OP已经知道的。这是一个我非常喜欢的好答案。现在我看到了这两种验证之间的区别。根据您的回答，我正在测试如何通过单击事件绕过验证。我输入了名字并按下了回车键，但我的表单验证仍然有效，为什么？您提到了服务器端的第二次验证。我是JSP的初学者。你能给我一个服务器端验证对我当前的客户端验证做了什么的例子吗？非常感谢你@您的提交代码仍然有效，因为您的表单上仍然有一个提交按钮，当您按下ENTER键时，它触发了单击
事件，而您无需自己按下按钮。如果你把那个按钮拿走，你只剩下表单，所以你的点击代码就不会运行了。还可以提交带有代码的表单，在这种情况下，单击代码将被忽略。服务器端代码（无论使用何种语言/平台）应重新验证所有入站数据，以确保其根据在客户端应用的相同规则有效……以确保未在客户端上进行篡改以绕过这些规则。任何人都可以很容易地绕过客户端代码。没有办法阻止想这样做的人这样做。
<!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>