2

我有一个关于 event.preventdefault 的问题。我在客户端验证中使用它只是为了确保填写用户名和密码。但是当我按下提交按钮并将验证传递给 php 时，我什么也没得到。我的意思是当我检查表单是否已提交并回显以检查我什么也没得到时。但是当我这样做时 (!isset($_POST['whatever']) 我得到了一些东西。检查字段是否为空也是如此。当我清空时我什么也没有得到，但是当我这样做时得到了一些东西 !empty

jQuery/html 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/verneyCustom.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="container">
      <!-- cms login form -->
      <form action="login.php" method="POST" class="form-signin" id="cms-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <span class="text-center" id="jsError"></span><!-- display client side errors -->
        <input type="text" class="form-control" id="username" placeholder="Username" autofocus><br/>
        <input type="password" class="form-control" id="password" placeholder="Password"><br/>
        <input type="submit" class="btn btn-lg btn-primary btn-block" id="loginToSystem" value="Sign In">
      </form>
    </div> 

    <!-- include jquery v1.10.2 library to validate client side  -->
    <script src="js/jquery.js"></script>
    <script> 
        //if the form is submitted check if values are ok
        $("#cms-signin").submit(function(event){
            if($('#username').val() == "" || $('#password').val() == ""){
                event.preventDefault();
                $("#jsError").html('You must fill in the form.');
            }else if($('#username').val() == ""){
                event.preventDefault();
                $("#jsError").html('Username is required.');
            }else if($('#password').val() == ""){
                event.preventDefault();
                $("#jsError").html('Password is required.');
            }
        }); 
    </script>
  </body>
</html>

php代码

<?php

    //include the connection to the cms database
    require_once($_SERVER['DOCUMENT_ROOT'].'/vcm/_cms/resources/database_connect.php');

    //check if the form was sent
    if(isset($_POST['loginToSystem'])){
        echo 'o';
        //create an array for errors
        $errors = array();

        //check if the username and password fields are empty
        //yes we did a check if jquery on the front but some people disable javascript
        if(empty($_POST['username']) || empty($_POST['password'])){
            echo 'empty';
        }else{
            echo 'ok';
        }
    }
    echo'p';

?>

所以基本上它无论如何都会回显'p'，但如果 isset 更改为！isset 只会回显'o'。保留原样时它将回显为空，更改为 !empty 时可以

4

1 回答 1

3

正如adeno解释的那样，您必须添加名称

<form action="login.php" method="POST" class="form-signin" id="cms-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <span class="text-center" id="jsError"></span><!-- display client side errors -->
        <input type="text" class="form-control"  name="username" id="username" placeholder="Username" autofocus><br/>
        <input type="password" class="form-control" name="password" id="password" placeholder="Password"><br/>
        <input type="submit" class="btn btn-lg btn-primary btn-block" id="loginToSystem" value="Sign In">
</form>

你也需要&&不是||

$("#cms-signin").submit(function(event){
        if($('#username').val() == "" && $('#password').val() == ""){
            event.preventDefault();
            $("#jsError").html('You must fill all fields.');
        }
    });
于 2013-10-04T00:28:46.233 回答