Question

嗨，如果输入的用户名/密码错误，我想让我的div震动。我尝试过的方式显然不起作用......我认为这可能与我使用javascript的方式有关。提前谢谢。

HTML / PHP / JAVASCRIPT：

<?php
    if(isset($_POST["submit"])) {
        $link = mysqli_connect("localhost","root","");
        mysqli_select_db($link,"users");
        $count = 0;
        $res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
        $count=mysqli_num_rows($res);
        if ($count > 0){
            header("location: /test.php");
        }
        else {
            ?>
            <script type="text/javascript">
            document.getElementById("box").addClass("invalid");
            </script>
            <?php
        }
    }
?>
<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
  <div id ="box">
    <img src="user.png">
    <form autocomplete="off" method="post" action="index.php">
    <input class="inputbox" type="text" name= "Username" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Username "/>
        <input class="inputbox" type="password" name ="Password" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Password"/>
        <input id = "submitbutton" type="submit" name="submit" value="Login" />
        </form> 
  </div>
</body>

CSS：

  body {
      background-color:#42cbf4;
    }
    #box {
      position:absolute;
      top:45%;
      left:50%;
      width:300px;
      height:375px;
      transform:translate(-50%, -50%);
      box-shadow:0px 0px 15px rgba(51, 96, 175,0.5);
      border-radius:8px;
    }
    #box img {
      position:absolute;
      width:150px;
      height:150px;
      left:50%;
      top:7%;
      transform:translate(-50%, 0);
    }
    .inputbox {
        margin-bottom:10px;
        border:solid #333caf 1px;
      border-radius:5px;
        background-color:rgba(51, 60, 175, .05);
        font-size:20px;
    }
    ::-moz-placeholder {
        opacity:0.5;
      color: #333caf;
    }
    :-moz-placeholder {
      color: #333caf;
        opacity:0.5;
    }
    ::-webkit-input-placeholder {
      color: #333caf;
        opacity:0.5;
    }
    #box form {
      position:absolute;
      left:50%;
      transform:translate(-50%, 0);
      bottom:5%;
      text-align:center;
    }
    .inputbox:focus {
        outline:none;
    }
    #box form {
      z-index:5;
    }
    #box #submitbutton {
      background-color:#333caf;
      border:0;
      margin-top:5px;
      font-family:arial;
      font-size:18px;
      padding:7px 17px;
      border-radius:5px;
      color:rgb(202,202,202);
      transition:color 0.2s ease-in-out, box-shadow 0.25s ease-out, background-color 0.2s ease-in-out ;
    }
    #box #submitbutton:hover {
      background-color:rgba(51, 60, 175, .5);
      color:white;
      box-shadow:3px 3px 5px rgba(15,15,15,0.7);
    }
    #box #submitbutton:focus {
        outline:none;
    }
    #box.invalid {
        outline-color: red;
        -webkit-animation: shake .5s linear;
    }
     @-webkit-keyframes shake {
        8%, 41% {
            -webkit-transform: translateX(-10px);
        }
        25%, 58% {
            -webkit-transform: translateX(10px);
        }
        75% {
            -webkit-transform: translateX(-5px);
        }
        92% {
            -webkit-transform: translateX(5px);
        }
        0%, 100% {
            -webkit-transform: translateX(0);
        }
    }

Answer 1

Dom没有＆＃39; addClass＆＃39;方法

＆＃39; addClass＆＃39;是一个jQuery元素方法。

这样做：

var box = document.getElementById("box");
box.className += ' invalid';

或：

$('#box').addClass('invalid');

Answer 2

Php代码：

  <?php
        $invalid = false;
        if(isset($_POST["submit"])) {
            $link = mysqli_connect("localhost","root","");
            mysqli_select_db($link,"users");
            $count = 0;
            $res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
            $count=mysqli_num_rows($res);
            if ($count > 0){
                header("location: /test.php");
            }
            else {
                $invalid=true;
            }
        }
    ?>

在</body>标记之前添加以下javascript代码：检查是否设置了$ invalid，如果设置，则将invalid类添加到框

<script>
$(document).ready(function() {
var is_invalid = "<?php echo $invalid;?>";

if(is_invalid)
$('#box').addClass('invalid');

});
</script>

如果输入不正确，尝试使div振动

2 个答案: