使用 php 和 ajax 的登录表单验证

Question

我有一个登录表单，其中包含两个输入电子邮件和密码。如果用户输入了不正确的凭据，我必须向他们显示错误。我已经在PHP中完成了表单验证，因此我需要从表单发送数据并获得响应消息，而无需刷新页面。我是ajax的新手，所以我不知道该怎么做登录.php<form action="register.php" method="POST" autocomplete="off">              <h1 class="card-title display-4 mt-4 mb-5 text-center">Login</h1>              <div class="form-group">                <input type="email" class="form-control" id="email" placeholder="Email" name="email" />                <div class="email-status"></div>              </div>              <div class="form-group">                <input type="password" class="form-control" id="password" placeholder="Password" name="password" />                <div class="password-status"></div>              </div>              <p class="card-text text-center"><a href="forgotpassword.php">Forgot your password?</a></p>              <span class="d-flex justify-content-center">                <button type="submit" class="btn btn-primary mb-4 w-50" style="border-radius: 20px;" name="login_btn" id="login_btn">Login</button>              </span>              <div class="success"></div>            </form><script>    $(document).ready(function() {      $("#login_btn").click(function() {        var email = $("#email").val();        var password = $("#password").val();        $.ajax({          url: 'register.php',          type: 'post',          data: {            email: email,            password: password          },          success: function(response) {            var emailstatus = "";            var passwordstatus = "";            var success = "";            if (response == 1) {              emailstatus = "required";            }          }        });      });    });  </script>

Answer 1

按如下方式替换 ajax 的数据对象，您当前的代码将正常工作：

data: {

   email: email,

   password: password,

   login_btn: true

}

您正在检查未通过 ajax 传递login_btn值的集。

Answer 2

您必须阻止自动表单提交。向表单元素添加 Id 或类，并添加此代码

文档内部准备就绪

$("#form-id").submit(function(e){

    e.preventDefault();

  });

并在表单元素中添加一个 Id

<form action="register.php" id='form-id' method="POST" autocomplete="off">