Question

我创建了一个小的登录表单，我在外部php文件中检查用户名。之后，我回复了一条错误消息或重定向到另一个站点。我的问题是显示错误消息。如果用户名！=“test”，我想在登录表单上方留一条短信。在我的脚本中，errormessage出现在登录表单上方，但登录表单会更深地跳过一行。

问题1：如何在登录表单上方创建占位符？那么登录表单是否已修复？

问题2：是否像我的代码一样在PHP中填充JavaScrpt变量是正确的方法？

感谢您的帮助！

＆＃13;

< script >
  var error_login;
if (error_login == 1) {
  $('#errorText').show();
} else {
  $('#errorText').hide();
} <
/script>

＆＃13;

<?php
  //debug
  error_reporting(-1);
  ini_set('display_errors', true);
  session_start();
  session_unset();
  session_destroy();
?>
  <!doctype html>
  <html lang="de">

  <head>
    <title>Hello World</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>

  <body>
    <?php include ("login.php"); ?>

    <div class="container">

      <div id="errorText" class="row justify-content-center">
        Login failed!
        <!-- This should be a placeholder -->


      </div>

      <!-- Formular Beginn -->
      <div class="row justify-content-center">
        <div class="col-md-6">
          <form class="form" role="form" method="post" action="?login=1" accept-charset="UTF-8" id="login">
            <div class="input-group" id="frmGrpBenutzer">
              <input type="password" class="form-control input-lg" id="user" name="user" placeholder="Username" required autofocus>
              <span class="input-group-btn">
                <button type="submit" class="btn btn-primary btn-custom btn-lg" title="login" id="loginbtn"><span>Go</span></button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>

  </html>

＆＃13;

这里是login.php文件：

<?php
session_start();
if(isset($_GET['login'])) {
    $user = $_POST['user'];

    if ($user == "test") {
        $_SESSION['username'] = $user;
        header('Location: site2.php');
    } else {
        echo "<script>
          var error_login = 1;
       </script>";
    }
}

Answer 1

有几种可能性。最简单的方法是使用opacity:0或visibility:hidden设置div，这样可以使文档流中的空间占用空间。

另一种选择，可能是设置position:absolute，这样可以防止它占用您登录表单中的空间。这样做会使它重叠很难，所以需要填充或边距来抵消表格的内容。

至于用PHP设置javascript变量，这是一种方法，但是你的脚本已经定义了error_login ...另一种方法是使用holder HTML元素，给它一个id和一个数据 - *属性。这样可以很容易地从代码中读取信息：

$('button').click(function() {
  console.log($('#login_status').data('login-error'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="login_status" data-login-error="1"></div>

<button>Click me to get result</button>

您还可以将所需的所有数据添加到JSON字符串中作为div的内容，并在页面加载后解析它。

如何在不创建新行的情况下显示DIV元素？

1 个答案: