使用 javascript 的简单验证表单

Question

使用 javascript 的简单验证表单

我的表单上有一个包含错误消息的“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>

Run Code Online (Sandbox Code Playgroud)

div#ShowError{
opacity:0.0;
}

Run Code Online (Sandbox Code Playgroud)

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";
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Que*_*tin 5

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

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

如果您不希望表单提交，请阻止事件的默认行为。

function func(e)
{

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，11 月前
查看次数：	57 次
最近记录：	6 年，11 月前