我只想使用ajax和php创建一个简单的登录页面。有一个表单有用户名和密码输入、复选框（目前没有用）和按钮。
这是我的登录页面：
<?php
if(isset($_SESSION['user_session']))
{
header("Location: home.php");
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="CSS/login.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<div class="main">
<img class="backImage" src="img/typewriter.jpg" />
<div id="login">
<div class="formClass">
<form class="loginForm" method="post"> //login form to validate
<div class="form-group">
<label for="userName">User Name</label>
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
<button type="submit" class="btn btn-primary" id="submitButton">Login</button>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.loginForm').validate({
rules: {
username: {
required: true,
minlength: 5,
maxlength: 18
},
password: {
required: true,
minlength: 5,
maxlength: 14
}
},
submitHandler: submitForm
});
function submitForm(){
var strAjax = $('.loginForm').serialize(); // get the input values
$.ajax({
type: 'POST',
url: 'logAjax.php',
data: strAjax,
cache: false,
success: function(data) {
alert(data);
if(data == true) {
window.location.href = "home.php"; // if response is true, then user can go home page
}
else {
alert("false"); // this is just for control purpose
}
}
});
return false;
}
});
</script>
</body>
</html>
还有我的php文件：
<?php //this is also too simple. just connect the database, control input values and response
include_once 'dbcon.php';
$username = mysqli_real_escape_string($conn, $_POST["username"]);
$password = mysqli_real_escape_string($conn, $_POST["password"]);
$sql = "SELECT * FROM tbl_user WHERE userName = '$username' AND password = '$password'";
$result = mysqli_query($conn, $sql);
$count = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
if($count == 1){
$_SESSION['user_session'] = $row['userName'];
echo TRUE;
}
else {
echo FALSE;
}
exit;
?>
但当我运行并试图打破验证规则时，它并没有得到错误消息，比如需要用户名，而是直接发送到php文件，而不需要输入值。因此，我收到$_POST["用户名"]和$_POSD["密码"]的错误消息。同样，当我尝试数据库中存在的真实用户名和密码时，同样的场景仍在继续。它不能只运行ajax部分来验证表单。如何处理这个问题？问题出在哪里？
问题是rules部分中的键应该是字段的名称，而不是ID。您的字段没有名称。我相信这也会导致表单的序列化出现问题。请尝试此操作。
<div class="form-group">
<label for="userName">User Name</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" placeholder="Password">
</div>