gpt4 book ai didi

javascript - 使用 javascript 的简单验证表单

转载 作者:行者123 更新时间:2023-11-30 07:49:16 25 4
gpt4 key购买 nike

我的表单上有一个包含“div”标签的错误消息。单击按钮且输入为空时显示此标签。我的代码可以正常工作,但是“div”标签很快就被隐藏了。

<htlm>
<head>
</head>
<body>
<div id="ShowError">
<h3>Username Or Password is incorrect.</h3>
</div>
<form id="Main" method="POST">
<input id="User" type="text" name="Name" placeholder="Enter Your Username">
<br>
<input id="Pass" type="password" name="Pass" placeholder="Enter Your Password"/>
<br>
<button id="bt">Login</button>
<button >Cancel</button>
</form>
</body>
<script src=""></script>
</html>
div#ShowError{
opacity:0.0;
}
var btn = document.getElementById("bt");
btn.addEventListener("click",func);

var Username = document.getElementById("User");
var Password = document.getElementById("Pass");

function func()
{

if(Username.value == "" || Password.value == "")
{
document.getElementById("ShowError").style.opacity = "1.0";
}
}

最佳答案

单击提交按钮将提交表单。

因此 JavaScript 运行,表单提交,并加载新页面。 JavaScript 尚未在新页面上运行。

Prevent the default behaviour如果您不想提交表单,请关闭事件。

function func(e)
{

if(Username.value == "" || Password.value == "")
{
e.preventDefault();
document.getElementById("ShowError").style.opacity = "1.0";
}
}

关于javascript - 使用 javascript 的简单验证表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56362341/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com