检查PHP表单是否有效以便在3次尝试后锁定用户

Question

I have a php login form with some authentication and validation. The particular script I have so far which I want to run is as follows:

<script type="text/javascript">
var login_attempts=3;
function check_form()
 {
    //This is where I want the code to check if the form is valid and will be submitted
 {
   alert("SuccessFully Logged In");
   //Not sure if I need this as the form contains PHP so if the credentials are correct then tehy go to another page
 }

  else
      {
       if(login_attempts==0)
       {
       alert("No Login Attempts Available");
       }

    else
      {
      login_attempts=login_attempts-1;
      alert("Login Failed Now Only "+login_attempts+" Login Attempts Available");

    if(login_attempts==0)
       {
        document.getElementById("name").disabled=true;
        document.getElementById("pass").disabled=true;
        document.getElementById("form1").disabled=true;
  }
 }
}

return false;
}   
</script>

The reason I want this, is so that after a user has attempted to login 3 times I want an alert box to display a message and also stop the user from entering anything in the box. I don't actually want to lock the account from the DB end as the users are authenticating on information other than a username and password.

I am quite novice when it comes to Js so sorry if I missed anything out

Edit: PHP login code

<?php
if($_POST)
  {
    include 'config.php';
$ref=$_POST['ref'];
$fullname=$_POST['fullname'];
$postcode=$_POST['postcode'];
$dob=$_POST['dob'];
$email=$_POST['email'];

$sUser=mysqli_real_escape_string($conn,$orielref);
$sPass=mysqli_real_escape_string($conn,$fullname);
$sPostcode=mysqli_real_escape_string($conn,$postcode);
$sDob=mysqli_real_escape_string($conn,$dob);
$sEmail=mysqli_real_escape_string($conn,$email);
$query="SELECT * From customers where ref_number='$sUser' and full_name='$sPass' and post_code='$sPostcode' and date_of_birth='$sDob' and email_address='$sEmail'";
$result=mysqli_query($conn,$query);
if(mysqli_num_rows($result)==1)
{   $row = $result->fetch_array(MYSQLI_ASSOC);
    session_start();
    $_SESSION['id'] = $row['id'];
    $_SESSION['ref_number'] = $row['ref_number'];
    header('location:index.php');
}
}

?>

Answer 1

First read ppl comments (are valid). Moving over them (if you still want to) you need to make an ajax request to your login page.

Since no info was provided regarding php response and method of calling I will suggest a solution but can't provide much code.

If you use jquery take a look at http://api.jquery.com/jquery.ajax/ .

Replace your first comment with:

$.ajax({
  method: "POST",
  url: "/login.php",
  data: { username: $('#username').val(), pass: $('#pass').val() },
  success: function(response) {
     if (response.valid) {
         alert('Logged In');
     }
     else {
         login_attempts=login_attempts-1;
         alert("Login Failed Now Only "+login_attempts+" Login Attempts Available");
     }
  }
})

If you want vanilla you can check my answer about vanilla ajax (is old and I'm sure there may be better answeres to it but should still work) here: Insert external page html into a page html and adapt it to your needs.

If you edit your question to provide more detailed info I can provide a much better answer, but in its current state... that's pretty much all I can give without listing tens of possibilities.

Edit: You added the login code: You need to return an answer to the client add to last line something like:

echo json_encode(['valid' => true]); // If login successful

or

echo json_encode(['valid' => false]); // If login not successful

Also you have sql injection possible there... really bad approach (but that's unrelated to current question). I suggest reading about pdo and prepared statements ( https://www.php.net/manual/en/book.pdo.php and https://www.w3schools.com/php/php_mysql_prepared_statements.asp ).