Question

我的表单上有一个'div'标签包含的错误消息。单击按钮且输入为null时显示此标记。我的代码正常工作，但是'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";
    }
}

Answer 1

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

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

Prevent the default behaviour，如果您不希望提交表单。

function func(e)
{

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

Answer 2

如果我对您的理解正确，则希望减慢验证错误消息的不透明性更改。例如，将不透明度从0.0慢慢更改为1.0，对不对？如果是这样，为了缓慢更改验证错误消息的不透明度，您必须使用javascript将css transition属性添加到验证错误消息div。

function func(event)
{

    if(Username.value == "" || Password.value == "")
    {

        document.getElementById("ShowError").style.transition = "all 2s"
        document.getElementById("ShowError").style.opacity = 1;
    }
}

也可以在单击登录按钮时停止重新加载页面，您可以在登录按钮中输入type =“ button”

<button type="button" id="bt">Login</button>

工作演示：

var btn = document.getElementById("bt");
btn.addEventListener("click",func);
//document.getElementById("ShowError").style.transition = "all 2s"
var Username = document.getElementById("User");
var Password = document.getElementById("Pass");

Username.addEventListener("input",func2)
Password.addEventListener("input",func2)

function func(event)
{

    if(Username.value == "" || Password.value == "")
    {

        document.getElementById("ShowError").style.transition = "all 2s"
        document.getElementById("ShowError").style.opacity = 1;
    }
}

function func2(){
  if(Username.value !== "" && Password.value !== ""){
            document.getElementById("ShowError").style.transition = "all 2s"
        document.getElementById("ShowError").style.opacity = 0;
  }
}

div#ShowError{
opacity:0.0;
}

<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 type="button" id="bt">Login</button>
<button >Cancel</button>
</form>

使用javascript

2 个答案: