当我输入正确的用户名和密码时，它会刷新页面答案

【问题标题】：When I enter correct username and password it refreshes the page当我输入正确的用户名和密码时，它会刷新页面
【发布时间】：2020-07-28 00:20:00
【问题描述】：

我正在做一个非常简单的用户名和密码验证练习。在我的页面中，我使用visibility: hidden; 隐藏了一个带有 css 的上传图片表单这是我的 HTML 代码：

<form id="enter"  method="POST" action="" >
        <p style="padding:0px;" >Username:</p>
        <input type="text" name="" id="user" placeholder="Username" required>
        <p style="padding:0px; margin-top: 10px;" >Password:</p>
        <input type="password" name="" id="pass" placeholder="Password" required>
        <input type="submit" name="" value="Login" onclick="javascript:validate()">
        </form>

当我输入用户名和密码时，我希望出现上传图片表单。如您所见，我尝试在其上使用一些 JavaScript。代码：

   function validate()
{
if(document.getElementById("user").value == "test" && document.getElementById("pass").value == "123" )

{
   
   document.getElementById('uploadForm').style.visibility = "visible";        
}
else
{
    alert( "Access Denied" );
}
}

问题是当我输入正确的用户名和密码时，它会刷新页面。任何帮助将不胜感激，谢谢。

【问题讨论】：

提交按钮提交所以页面提交..（我希望你知道这不安全）
是的，我知道它不安全，但无论如何感谢您的警告。我怎样才能让这个按钮不提交？
您要么取消操作，取消表单提交，要么不使用提交按钮。
嘿，我刚刚发现如果您将输入从“提交”更改为“按钮”。它停止刷新。
因为按钮不是提交按钮。 ;) 其他学习方法是 preventDefault 和返回 false。

标签： javascript html

【解决方案1】：

当您单击按钮时，您的表单会默认提交。

这通常包括发送 POST，然后刷新以获取下一页，但在客户端表单处理中，您需要执行以下两项操作之一来阻止此默认提交：

您的函数validate() 可以更新为将事件对象作为参数，然后调用preventDefault。
您可以通过该 onclick 功能return false，这将阻止进一步的操作
您可以将其从“提交”类型的输入更改为<button type=button>。 （出于可访问性原因不推荐）

【讨论】：