javascript - 阻止表单发布，直到满足 javascript 代码

Question

每当我单击提交按钮时，它会触发alert("empty username")但会引导我checklogin.php...我如何避免这种情况并让它保留在页面上，除非该字段不为空？

</body>
</html>
<script type="text/javascript"></script>       
function RequiredFields(){
     var username=document.forms["login"]["username"].value;


     if (username==""||username==null){
         alert("empty username")
         document.login.username.focus();
         if(document.all||document.getElementById){
             return false;
         }

     }
}
</script>
<form action="checklogin.php" method="POST" onSubmit="RequiredFields()">
Username<input type="text" name="username"/>
Password<input type="password" name="password"/>
<input type="submit" value="Login"  />
</form>
</body>
</html>

Answer 1

在提交输入中，您可以像这样添加 onsubmit 的事件处理程序：

<input type="submit" value="submit form" onsubmit="return RequiredFields();"/>

如果不是所有必填字段都已满，RequiredFields 将返回 false 并且提交过程将停止。

Answer 2

当您将提交更改为此时，如果 RequiredFields 返回，它将不会提交false。

<input type="submit" value="Login" onsubmit="return RequiredFields();"/>

Answer 3

使用此代码

<input type="submit" value="Login" onclick="return RequiredFields()" />

Answer 4

我认为这可能有效。

   function xyz(event)
    {
      event.preventDefault(); // while the function returns false
    }

您也可以使用所需的 HTML5 属性来避免 javascript 负担过重。 <*输入类型="" 必需> *