Question

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

1）通过onclick按钮的Submit属性进行表单验证：

<!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）通过onsubmit元素的<form>属性进行表单验证：

<!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>

以上两个代码示例实现了表单验证的相同目的。我不是要问这个问题中onclick和onsubmit之间的一般区别：What's the difference between onclick and onsubmit?相反，我要问：哪一个是验证表单的首选方法？这两种方法有什么区别吗？

Answer 1

是的，这是一个很大的区别，您可以在进行验证时参考。

在onclick期间，您只能引用提交按钮的click事件。如果您的验证失败，并且您取消了该活动（通过event.stopPropagation()），您似乎已阻止该表单提交，但点击提交按钮并不是提交形式即可。在某些情况下，也可以通过按ENTER键或使用form.submit()以编程方式完成，在这种情况下，您的验证代码将被绕过。

在onsubmit期间，您引用了submit事件，如果您取消该事件，则表单不会提交，无论您通过什么途径进入提交事件。 出于这个原因，表单验证应该始终通过submit事件完成。并且，它也应该在服务器上再次完成，因为所有客户端验证都可以轻松绕过任何想要这样做的人。

作为旁注，您不应该首先使用内联HTML事件属性，例如onsubmit和onclick。这就是我们20年前进行事件登记的方式，但由于它们实施的难易程度（and a lack of understanding as to how they work and the issues that using them creates），这种做法至今仍然存在。相反，现代标准应该通过 .addEventListener() 的DOM标准来使用。

＆＃13;

document.querySelector("form").addEventListener("submit", function(evt){
  alert("Form submitted without having submit button!\nEvent was: " + evt.type);
});

＆＃13;

<p>Click into the text box below and then press ENTER</p>
<form action="#" method="GET">
  <input id="test">
</form>

＆＃13;

Answer 2

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

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

通过onsubmit和onclick进行表单输入验证之间的任何区别？

2 个答案: