使用javascript的簡單驗證表單
[英]simple validation form with javascript
問題描述
我在我的表單上有一個'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";
}
}
2 個解決方案
解決方案1
4 2019-05-29 14:00:03
解決方案2
0 已采納 2019-05-29 14:26:52
如果我對您的理解正確，則希望減慢驗證錯誤消息的不透明度更改。 例如，將不透明度從0.0慢慢更改為1.0，對不對？ 如果是這樣，為了緩慢更改驗證錯誤消息的不透明度，您必須使用javascript將CSS過渡屬性添加到驗證錯誤消息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進行簡單的表單驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.