使用javascript的简单验证表单
[英]simple validation form with javascript
问题描述
i have a 'div' tag included error message on the my form. 
我在我的表单上有一个'div'标签包含的错误消息。 this tag displaying when button is clicked and inputs are null. 单击按钮且输入为null时显示此标记。 my code is working but, 'div' tag is hide speedly. 我的代码正常工作，但是'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
Clicking a submit button will submit the form. 单击提交按钮将提交表单。
So the JavaScript runs, the form submits, and a new page is loaded. 这样就运行了JavaScript，提交了表单，并加载了新页面。 The JavaScript hasn't run on the new page. JavaScript尚未在新页面上运行。
Prevent the default behaviour of the event if you don't want the form to submit. 如果您不希望提交表单，请阻止事件的默认行为 。
function func(e)
{
if(Username.value == "" || Password.value == "")
{
e.preventDefault();
document.getElementById("ShowError").style.opacity = "1.0";
}
}
解决方案2
0 已采纳 2019-05-29 14:26:52
If I understand you correctly you want to slowdown the opacity change of validation error message. 如果我对您的理解正确，则希望减慢验证错误消息的不透明度更改。 For example, slowly change opacity 0.0 to 1.0, right? 例如，将不透明度从0.0慢慢更改为1.0，对不对？ If so, for slow change of opacity of the validation error message you have to add the css transition property using javascript to your validation error message div. 如果是这样，为了缓慢更改验证错误消息的不透明度，您必须使用javascript将CSS过渡属性添加到验证错误消息div中。
function func(event)
{
if(Username.value == "" || Password.value == "")
{
document.getElementById("ShowError").style.transition = "all 2s"
document.getElementById("ShowError").style.opacity = 1;
}
}
and also to stop reloading the page when you click login button you can include type="button" in your login button 并在单击登录按钮时停止重新加载页面，您可以在登录按钮中包含type =“ button”
<button type="button" id="bt">Login</button>
Working demo : 工作演示：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.