即使验证失败，表单也会提交

Form submits even if validation fails

本文关键字：提交 表单 验证 失败      更新时间：2023-09-26

我只是在学习Javascript，所以如果我的问题看起来很傻，请耐心等待。。。

我需要创建一个html表单，并对字段进行一些验证。不管字段是否正确填写，当点击提交按钮时，我都会得到一个错误404。如果我复制/粘贴别人做同样事情的代码，它会很好地工作。文件"somepage.php"不存在，但对于其他人的代码也不存在。

我在CodeLobster中对它进行了编码，然后在Notepad++中进行了编码。没有变化。

这是HTML文件，下面是javascript文件的内容。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Registration Form</title>
        <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
        <form action="somepage.php" onsubmit="checkLogin()" method="post" >
                Name: <input type="text" name="name" id="nameF" /><br />
                Email: <input type="text" name="email" id="emailF" /><br />
            <input type="submit" value="Submit" name="submit" />    
        </form>
    </body>
</html>
function checkLogin()
{
   var emailPattern = /^'w+(['.'-]?'w+)*@'w+(['.'-]?'w+)*'.[a-z]{2,6}$/i;
   var email = document.getElementById('emailF').value;
   var name = document.getElementById('name').value;    
    if (email == "")
    {
        alert("Please enter valid email address.");
       document.getElementById('emailF').select();
        document.getElementById('emailF').focus();
       return false;
    } else if   (name == "") {
        alert("Please enter your name.");
       document.getElementById('nameF').select();
        document.getElementById('nameF').focus();
       return false;
    }  else if (!emailPattern.test(email)) {
        alert("The email address entered is invalid");
       document.getElementById('emailF').select();
        document.getElementById('emailF').focus();
       return false;
    }
    return true;    
}

您的问题不在于页面丢失（您已经知道了）。问题是，即使验证失败，表单仍然会提交。

form.onsubmit方法应返回false以阻止表单提交。换句话说，这个：

<form action="somepage.php" onsubmit="checkLogin()" method="post" >

应为：

<form action="somepage.php" onsubmit="return checkLogin()" method="post" >

当然，如果表单确实进行了验证，它将正确地进入somepage.php，此时您将收到404错误，因为页面不存在。

相关文章：