我试图找出在用户发送到login.php（API）之前，以最好和最简单的方式，我可以检查登录信息是否正确，已经在客户端。
我正在考虑在JS中创建som方法，通过另一个api查看验证，也许是validate-login.php，如果这个方法返回“成功”或其他什么，那么它将允许API调用通过。但我不知道我怎么能这样做？
我可以创建另一个validate-login.php文件，但是我不知道如何在登录login.php之前使用它来检查用户名和密码，以及我怎么告诉它不要去login.php如果该API返回“错误”或其他内容。
正在考虑onkeyup（），但是我想一次只适用于一个字段，我需要它来检查两个组合？
这是我到目前为止所得到的：
//Function that validates the login info all together does the combo of username and password exists?
function validateLogin() {
//Some frontend - client side - validation before the AJAX call can happen
$.ajax({
"method" : "POST",
"url" : "../tinder/api/validate-login.php",
}).done(function(data) {
//If response = 0 - Validation went fine - User should be sent to api: login.php
//If response = 1 - Wrong username and/or password - User should be prompted with the error on the current side
}).fail(function() {
});
}<?php
//File that handles the login process of the user
$sFileName = '../txt/users.txt';
$sUsername = $_POST['username'];
$sPassword = $_POST['password'];
//If username and password field is set = NOT empty
if(!empty($sUsername) && !empty($sPassword)) {
//echo 'Okay a username and password has been filled out'; //Only for test
$sajUsers = file_get_contents($sFileName);
$ajUsers = json_decode($sajUsers);
//Go through the users in the array to check
for ($i = 0; $i < count($ajUsers); $i++) {
//Check if username and password combo does exist in file
if($ajUsers[$i]->username == $sUsername && $ajUsers[$i]->password == $sPassword) {
//echo 'Yes username and password combo exists'; //Only for test
//Check if user is verified - Meaning that they have already confirmed through email link
if($ajUsers[$i]->verification == true) {
//User has already activated the account through email link
echo 'Account is ready to go'; //Only for test
//Check if an image is already set
if($ajUsers[$i]->imageSet == true) {
//User has an uploaded image
//TODO: Redirect to page where users will be shown randomly
echo 'Image has been set'; //Only for test
} else {
//User must upload an image
//TODO: Redirect to user-profile page, where user must upload an image
echo 'Image must be uploaded in order to continue'; //Only for test
}
} else {
//User must activate account first
//TODO: Redirect to start page with modal/popup telling them, that they need to activate account through mail
echo 'You must activate account first'; //Only for test
}
}
}
//Check if user has an image set for them - Otherwise redirect to profile-page
//TODO
} else {
echo '{"status" : "error", "message" : "Username or password was not field out"}';
header('refresh: 3; url=http://localhost:8888/tinder/');
exit;
}
?><!-- Login Modal -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="login-modal-label">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="frm-login" action="api/login.php" method="POST">
<div class="modal-body">
<div class="form-group">
<label for="input-login-username">Username</label>
<input type="text" name="username" class="form-control" id="input-login-username" placeholder="Enter username" onkeyup="validate-login()">
</div>
<div class="form-group">
<label for="input-login-password">Password</label>
<input type="password" name="password" class="form-control" id="input-login-password" placeholder="Enter password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember-me-check">
<label class="form-check-label" for="remember-me-check">Remember me</label>
<div class="text-right">
<!-- TODO: align link with checkbox and label but just to the right -->
<a href="#">Forgot password?</a>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="mr-auto" data-dismiss="modal" data-toggle="modal" data-target="#signup-modal">Need an account?</a>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>