大佬教程收集整理的这篇文章主要介绍了显示淡入淡出的jQuery警报消息,而不使用传统的javascript警报框，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Html表格
<form name="userLogin" action="success.PHP" onsubmit="validateInputField()" method="post"> UserName: <input type="text" name="username" placeholder="Username"> password: <input type="password" name="pwd" placeholder="password"> <input type="submit" value="Submit"> </form>
javaScript代码
<script>
function validateInputField() {
var x = document.forms["userLogin"]["username"].value;
var y = document.forms["userLogin"]["pwd"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
if (y == null || y == "") {
alert("password must be filled out");
return false;
}
}
</script>
function validateInputField() { var x = document.forms["userLogin"]["username"].value; var y = document.forms["userLogin"]["pwd"].value; if (x == null || x == "") { $(".alert").find('.message').text("Name must be filled out"); $(".alert").fadeIn("slow",function(){ setTimeout(function(){ $(".alert").fadeOut("slow"); },4000); }); return false; } if (y == null || y == "") { $(".alert").find('.message').text("Name must be filled out"); $(".alert").fadeIn("slow",4000); }); return false; } }
.hide { display: none; } .alert { BACkground: red; position: absolute; top: 50%; left: 40%; padding:20px; } .message { color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="userLogin" action="success.PHP" onsubmit="validateInputField()" method="post"> UserName: <input type="text" name="username" placeholder="Username">password: <input type="password" name="pwd" placeholder="password"> <input type="submit" value="Submit"> </form> <div class="alert hide"> <div class="message"> </div> </div>
要更加优化
function validateInputField() { var x = document.forms["userLogin"]["username"].value; var y = document.forms["userLogin"]["pwd"].value; if (x == null || x == "") { showAlert("Name must be filled out"); return false; } if (y == null || y == "") { showAlert("password must be filled out"); return false; } } function showAlert(messagE) { $(".alert").find('.message').text(messagE); $(".alert").fadeIn("slow",function() { setTimeout(function() { $(".alert").fadeOut("slow"); },4000); }); }
.hide { display: none; } .alert { BACkground: red; position: absolute; top: 50%; left: 40%; padding:20px; } .message { color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="userLogin" action="success.PHP" onsubmit="validateInputField()" method="post"> UserName: <input type="text" name="username" placeholder="Username">password: <input type="password" name="pwd" placeholder="password"> <input type="submit" value="Submit"> </form> <div class="alert hide"> <div class="message"> </div> </div>
以上是大佬教程为你收集整理的显示淡入淡出的jQuery警报消息,而不使用传统的javascript警报框全部内容，希望文章能够帮你解决显示淡入淡出的jQuery警报消息,而不使用传统的javascript警报框所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。