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

Question

我有以下表格，我的问题是在不使用普通的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>

Answer 1

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

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>

Answer 2

为什么不make your own?

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

Answer 3

登录页面：-

首先，您必须创建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>