显示淡入淡出的jQuery警报消息,而不使用传统的javascript警报框

时间:2016-06-14 12:22:21

标签: javascript jquery html

我有以下表格,我的问题是在不使用普通的js alertBox的情况下实现fadding JQuery Alert消息

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>

3 个答案:

答案 0 :(得分:4)

您只需添加div并在div中显示错误消息,然后使用fadeInfadeOut为其设置动画。

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",function(){
      setTimeout(function(){
        $(".alert").fadeOut("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>

答案 1 :(得分:2)

为什么不make your own?

一个简单的fadeIn()fadeOut()可以创建一个非常酷的“警报框”并且非常易于使用:)

答案 2 :(得分:0)

登录页面:-

首先,您必须创建Login Code,最后使用header()URL get Variable

<?php
header('Location:view.php?status=login');
?>

仪表板页面:-

<?php
if(isset($_GET['status']) == 'login'){
     echo '<div class="alert alert-success">
        Login Successfully !!!
           </div>';
}
?>

jQuery部分:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" rel="stylesheet"> 
$('document').ready(function(){ 
$(".alert").fadeIn(1000).fadeOut(5000); 
}); 
</script>