注册系统问题

问题描述 投票：0回答：1

我有一个 PHP 注册系统。当我注册时，所有注册字段都应具有绿色边框，然后用户应重定向到

index.php
。然而，发生的情况是，即使注册凭据成功，电子邮件文本也不会变成绿色，而是保持红色。此外，不会发生重定向到 
index.php
的情况。我该如何解决这个问题？

登录.php：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EFA | Log In or Sign Up</title>
    <style media="screen">
    @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
         *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: #63a05c;
      font-family: Lora, sans-serif;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Lora;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      max-width: 80%;
      max-height: 80%;
      margin-top: 20px;
      box-shadow: 0 1px 1px black;
      border-radius: 5px;
    }

    .login {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, auto);
      padding: 1em 3em;
      background-color: #A4907C;
      margin-top: -20px;
      height: 550px;
      width: 550px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

     .textHead, .logintxt {
      text-align: center;
    }

    .loginemailtxt {
      border: 1px solid black;
      outline: none;
      border-radius: 5px;
      margin: 1em 0 2em 0;
      font-family: Lora;
      width: 250px;
      height: 35px;
      margin-left: 100px;
      margin-top: 20px;
    }

    .loginemailtxt::placeholder {
      color: black;
      padding-left: 3px;
    }

    .loginemailtxt:focus {
      border: 2px solid #3F72AF;
    }

    .loginpwdtxt {
      border: 1px solid black;
      outline: none;
      border-radius: 5px;
      font-family: Lora;
      width: 250px;
      height: 35px;
      margin-left: 100px;
      margin-top: 20px;
    }

    .loginpwdtxt::placeholder {
      color: black;
      padding-left: 3px;
    }

    .loginpwdtxt:focus {
      border: 2px solid #3F72AF;
    }

    .loginbtn {
      border-radius: 5px;
      background-color: #3F72AF;
      border: none;
      cursor: pointer;
      font-family: Lora;
      width: 120px;
      height: 40px;
      margin-left: 170px;
      margin-top: 50px;
      box-shadow: 0 1px 1px black;
    }

    .loginbtn:active {
      box-shadow: none;
    }

    #loginNoEmail {
      position: absolute;
      background-color: #F24C3D;
      border-radius: 5px;
      margin-top: 210px;
      margin-left: 120px;
      padding-left: 2px;
      padding-right: 2px;
      visibility: hidden;
    }

    #loginNoPassword {
      position: absolute;
      background-color: #F24C3D;
      border-radius: 5px;
      margin-top: 290px;
      margin-left: 135px;
      padding-left: 2px;
      padding-right: 2px;
      visibility: hidden;
    }

    #loginIncorrectCreds {
      position: absolute;
      background-color: #F24C3D;
      border-radius: 5px;
      margin-top: 290px;
      margin-left: 135px;
      padding-left: 2px;
      padding-right: 2px;
      visibility: hidden;
    }

    .error-message {
      position: absolute;
      background-color: #F24C3D;
      border-radius: 5px;
      padding-left: 2px;
      padding-right: 2px;
      visibility: hidden;
    }

    #signupNoName {
      margin-top: 200px;
      margin-left: 145px;
    }

    #signupNoEmail {
      margin-top: 261px;
      margin-left: 125px;
    }

    #signupNoPwd {
      margin-top: 322px;
      margin-left: 150px;
    }

    #signupValidEmail {
      margin-top: 261px;
      margin-left: 120px;
    }

    #signupValidPwd {
      margin-top: 322px;
      margin-left: 90px;
    }

    #signupEmailExists {
      margin-top: 261px;
      margin-left: 140px;
    }

    .information {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, auto);
      padding: 1em 3em;
      background-color: #F3DEBA;
      text-align: center;
      margin-top: -20px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .information h6 {
      margin: 0;
    }

    .infoHead1 {
      margin-top: 30px;
    }

    .infoHead2 {
      background-color: #A0BFE0;
      border-radius: 5px;
      margin-top: -40px;
      height: 33px;
      width: 340px;
      margin-left: 50px;
    }

     .infoIcons {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      align-items: center;
      justify-items: center;
    }

    .infoIcons svg {
      font-size: 40px;
    }

    .signup {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, auto);
      padding: 1em 3em;
      background-color: #A4907C;
      margin-top: -20px;
      height: 550px;
      width: 550px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

    .signupnametxt {
      border: 1px solid black;
      outline: none;
      border-radius: 5px;
      margin: 1em 0 2em 0;
      font-family: Lora;
      width: 250px;
      height: 35px;
      margin-left: 100px;
      margin-top: 20px;
    }

    .signupnametxt::placeholder {
      color: black;
      padding-left: 3px;
    }

    .signupnametxt:focus {
      border: 2px solid #3F72AF;
    }

    .signupemailtxt {
      border: 1px solid black;
      outline: none;
      border-radius: 5px;
      font-family: Lora;
      width: 250px;
      height: 35px;
      margin-left: 100px;
    }

    .signupemailtxt::placeholder {
      color: black;
      padding-left: 3px;
    }

    .signupemailtxt:focus {
      border: 2px solid #3F72AF;
    }

    .signuppwdtxt {
      border: 1px solid black;
      outline: none;
      border-radius: 5px;
      font-family: Lora;
      width: 250px;
      height: 35px;
      margin-left: 100px;
      margin-top: 25px;
    }

    .signuppwdtxt::placeholder {
      color: black;
      padding-left: 3px;
    }

    .signuppwdtxt:focus {
      border: 2px solid #3F72AF;
    }

    .signupbtn {
      border-radius: 5px;
      background-color: #3F72AF;
      border: none;
      cursor: pointer;
      font-family: Lora;
      width: 120px;
      height: 40px;
      margin-left: 170px;
      margin-top: 30px;
      box-shadow: 0 1px 1px black;
    }

    .signupbtn:active {
      box-shadow: none;
    }

    </style>
  </head>
  <body>
    <div class="container">
      <form id="mainForm" action="javascript:void(0)" method="post">
        <div class="login">
          <h2 class="textHead">EFA</h2>
          <h2 class="logintxt">Log In to Your Account</h2>
          <input type="text" id="loginemailtxt" class="loginemailtxt" name="logInEmail" placeholder="Email Address">
          <input type="password" id="loginpwdtxt" class="loginpwdtxt" name="logInPassword" placeholder="Password">
          <button class="loginbtn" id="loginBtn" type="submit" name="logInBtn" onclick="checkLogin()">Log In</button>
          <h5 id="signuptext" onclick="showorHide('signup','login')" style="margin-top: 50px; text-align: center;">Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
          <h6 style="text-align: center;">By clicking "Log In", you log back into your Existing Account</h6>
          <h5 id="loginNoEmail">Please enter your email address</h5>
          <h5 id="loginNoPassword">Please enter your password</h5>
          <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
        </div>

        <div class="signup" style="display: none">
          <h2 class="textHead">EFA</h2>
          <h2 class="logintxt">Create a New Account</h2>
          <input id="signupnametxt" type="text" class="signupnametxt" name="signUpName" placeholder="Name">
          <input id="signupemailtxt" type="text" class="signupemailtxt" name="signUpEmail" placeholder="Email Address">
          <input id="signuppwdtxt" type="password" class="signuppwdtxt" name="signUpPassword" placeholder="Create Password">
          <button id="signupbtn" class="signupbtn" type="submit" name="signUpBtn" onclick="checkEmail()">Sign Up</button>
          <h5 id="logintext" onclick="showorHide('login','signup')" style="margin-top: 50px; text-align: center;">Already a Member? <u style="cursor: pointer;">Log In</u></h5>
          <h6 style="margin-top: 5px; text-align: center;">By clicking "Sign Up", you agree to our <u style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
          <h5 id="signupNoName" class="error-message">Please enter your name</h5>
          <h5 id="signupNoEmail" class="error-message">Please enter your email address</h5>
          <h5 id="signupNoPwd" class="error-message">Please create a password</h5>
          <h5 id="signupValidEmail" class="error-message">Please enter a valid email address</h5>
          <h5 id="signupValidPwd" class="error-message">Your password must be above 6 characters</h5>
          <h5 id="signupEmailExists" class="error-message">Email is already registered</h5>
        </div>
      </form>

      <div class="information">
        <h2 class="infoHead1">All-In-One</h2>
        <h2 class="infoHead2">Medical Consultancy Platform</h2>
        <div class="infoIcons">
          <i class="fa-solid fa-person"></i>
          <i class="fa-solid fa-calendar-check"></i>
          <i class="fa-solid fa-handshake-angle"></i>
          <h6 style="text-align: center;">Connect with <br>Consultants</h6>
          <h6 style="text-align: center;;">Book Online Interactions <br>Anytime</h6>
          <h6 style="text-align: center;">Volunteer as a <br>Verified Consultant</h6>
        </div>
        <div class="infoIcons" style="margin-top: 20px;">
          <i class="fa-brands fa-youtube"></i>
          <i class="fa-solid fa-file"></i>
          <i class="fa-solid fa-magnifying-glass"></i>
          <h6 style="text-align: center;">Self-Educate with <br>Resources</h6>
          <h6 style="text-align: center;">Get Personalised, Detailed <br>Prescriptions</h6>
          <h6 style="text-align: center;">Search for specific <br>Medical Help</h6>
        </div>
        <h5>Non Profit • Start for Free • Cancel Anytime</h5>
      </div>
    </div>

    <script type="text/javascript">

        // Toggling between the Log In and Sign Up DIVs

        function showorHide(showDivName, hideDivName) {
            var showDiv = document.getElementsByClassName(showDivName);
            var hideDiv = document.getElementsByClassName(hideDivName);

            hideDiv[0].style.display = "none";
            showDiv[0].style.display = "grid";
        }

        // Log In Validation System

        // Input Fields
        var logInEmail = document.getElementById("loginemailtxt");
        var logInPwd = document.getElementById("loginpwdtxt");
        // Error Messages
        var loginNoEmail = document.getElementById("loginNoEmail");
        var loginNoPassword = document.getElementById("loginNoPassword");
        var loginIncorrectCreds = document.getElementById("loginIncorrectCreds");
        // Log In button
        var loginBtn = document.getElementById("loginBtn");

        loginBtn.addEventListener("click", function(e) {
          e.preventDefault();
          if(logInEmail.value === "" && logInPwd.value === "") {
            // error messages
            loginNoEmail.style.visibility = 'visible';
            loginNoPassword.style.visibility = 'visible';
            loginIncorrectCreds.style.visibility = 'hidden';
            // borders
            logInEmail.style.border = '2px solid red';
            logInPwd.style.border = '2px solid red';
          } else if (logInEmail.value === "") {
            // error messages
            loginNoEmail.style.visibility = 'visible';
            loginNoPassword.style.visibility = 'hidden';
            loginIncorrectCreds.style.visibility = 'hidden';
            // borders
            logInEmail.style.border = '2px solid red';
            logInPwd.style.border = '2px solid green';
          } else if (logInPwd.value === "") {
            // error messages
            loginNoEmail.style.visibility = 'hidden';
            loginNoPassword.style.visibility = 'visible';
            loginIncorrectCreds.style.visibility = 'hidden';
            // borders
            logInEmail.style.border = '2px solid green';
            logInPwd.style.border = '2px solid red';
          } else {
            // error messages
            loginNoEmail.style.visibility = 'hidden';
            loginNoPassword.style.visibility = 'hidden';
            loginIncorrectCreds.style.visibility = 'hidden';
            // borders
            logInEmail.style.border = '2px solid green';
            logInPwd.style.border = '2px solid green';
            document.getElementById('mainForm').submit();
          }
        });

        // Sign Up Validation System

        // Input Fields
        var signUpName = document.getElementById('signupnametxt');
        var signUpEmail = document.getElementById('signupemailtxt');
        var signUpPassword = document.getElementById('signuppwdtxt');
        // Error Messages
        var signupNoName = document.getElementById('signupNoName');
        var signupNoEmail = document.getElementById('signupNoEmail');
        var signupNoPwd = document.getElementById('signupNoPwd');
        var signupValidEmail = document.getElementById('signupValidEmail');
        var signupValidPwd = document.getElementById('signupValidPwd');
        var signupEmailExists = document.getElementById('signupEmailExists');
        // Sign Up button
        var btnSubmit = document.getElementById('signupbtn');

        btnSubmit.addEventListener('click', () => {
          if(signUpName.value === "") {
            signUpName.style.border = '2px solid red';
            signupNoName.style.visibility = 'visible';
            signupEmailExists.style.visibility = 'hidden';
          } else {
            signUpName.style.border = '2px solid green';
            signupNoName.style.visibility = 'hidden';
          }

          if(signUpEmail.value === "") {
            signUpEmail.style.border = '2px solid red';
            signupNoEmail.style.visibility = 'visible';
          } else if (!validateEmail(signUpEmail.value)) {
            signUpEmail.style.border = '2px solid red';
            signupValidEmail.style.visibility = 'visible';
            signupEmailExists.style.visibility = 'hidden';
          } else {
            signUpEmail.style.border = '2px solid green';
            signupValidEmail.style.visibility = 'hidden';
            signupNoEmail.style.visibility = 'hidden';
            signupEmailExists.style.visibility = 'hidden';
          }

          if(signUpPassword.value === "") {
            signUpPassword.style.border = '2px solid red';
            signupNoPwd.style.visibility = 'visible';
            signupEmailExists.style.visibility = 'hidden';
          } else if (signUpPassword.value.length < 6) {
            signUpPassword.style.border = '2px solid red';
            signupValidPwd.style.visibility = 'visible';
            signupEmailExists.style.visibility = 'hidden';
          } else {
            signUpPassword.style.border = '2px solid green';
            signupValidPwd.style.visibility = 'hidden';
            signupNoPwd.style.visibility = 'hidden';
          }

          if(signUpName.value.length > 0 && signUpEmail.value.length > 0 && signUpPassword.value.length >= 6) {
            document.getElementById('mainForm').submit();
          }
        });

    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
  </body>
</html>

配置.php：

<?php

session_start();
$_SESSION['signUpName'] = $_POST['signUpName'];
$_SESSION['signUpEmail'] = $_POST['signUpEmail'];
$_SESSION['signUpPassword'] = $_POST['signUpPassword'];

// initialising the variables

$name = $_POST['signUpName'];
$email = $_POST['signUpEmail'];
$password = $_POST['signUpPassword'];

$errors = array();
$result;

// making the database connection

$dbHost = "localhost";
$dbUser = "root";
$dbPass = "root";
$database = "binarybrawl";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, couldn't connect to the database");

// check database for existing email and prevent SQL injection

$sql = "SELECT * FROM users WHERE email='$email'";
$result = mysqli_query($connection, $sql);

if(mysqli_num_rows($result) > 0) {
  echo "Email is already registered";
} else {
  $hashed_password = md5($password); // this will encrypt the password
  $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$hashed_password')";

// register the user if no error

if(count($errors) == 0) {
  $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$hashed_password')";
  $stmt = mysqli_stmt_init($connection);
}

if (mysqli_query($connection, $sql)) {
  $_SESSION["signUpBtn"] = "1";
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}
}


?>

脚本.js：

// Validate the Email

function validateEmail(signUpEmail) {
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(signUpEmail);
}

function checkEmail() {
  var signUpName = $("#signupnametxt").val();
  var signUpEmail = $("#signupemailtxt").val();
  var signUpPassword = $("#signuppwdtxt").val();
  if (signUpName && signUpEmail && signUpPassword && signUpPassword.length >= 6 && validateEmail(signUpEmail)) {
    jQuery.ajax ({
      url: "config.php",
      data: {
        signUpName:signUpName,
        signUpEmail:signUpEmail,
        signUpPassword:signUpPassword
      },
      type: "POST",
      success:function(data){
        $("#signupEmailExists").show();
        $("#signupemailtxt").css("border", "2px solid green");
        if(data) {
          console.log("Hi");
          $("#signupemailtxt").css("border", "2px solid red");
          $("#signupEmailExists").css("visibility","visible");
        } else {
          $("#signupemailtxt").css("border", "2px solid green");
          $("#signupEmailExists").css("visibility","hidden");
          window.location.href = 'index.php';
        }
        $("#signupEmailExists").html(data);
      },
      error:function () {
      }
    });
  }
}

// AJAX for Login System

function checkLogin() {
  var logInEmail = $("#loginemailtxt").val();
  var logInPassword = $("#loginpwdtxt").val();

  if (logInEmail.length > 0 && logInPassword.length > 0) {
    jQuery.ajax ({
      url: "backend.php",
      data: {
        logInEmail: logInEmail,
        logInPassword: logInPassword
      },
      type: "POST",
      success: function(data) {
        $("#loginIncorrectCreds").show();
        $("#loginemailtxt").css("border", "2px solid green");
        $("#loginpwdtxt").css("border", "2px solid green");
        if (data) {
          $("#loginemailtxt").css("border", "2px solid red");
          $("#loginpwdtxt").css("border", "2px solid red");
          $("#loginIncorrectCreds").css("visibility", "visible");
        } else {
          $("#loginemailtxt").css("border", "2px solid green");
          $("#loginpwdtxt").css("border", "2px solid green");
          $("#loginIncorrectCreds").css("visibility", "hidden");
          // Redirect to the appropriate interface
          window.location.href = 'index.php';
        }
        $("#loginIncorrectCreds").html(data);
      },
      error: function () {
        // Handle error case
      }
    });
  }
}

后端.php：

<?php

session_start();

// Making Connection To The Database

$dbHost = "localhost";
$dbUser = "root";
$dbPass = "root";
$database = "binarybrawl";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, couldn't connect to the database");

// Login System

if (isset($_POST['logInEmail']) && isset($_POST['logInPassword'])) {
  $logInEmail = $_POST['logInEmail'];
  $logInPassword = $_POST['logInPassword'];
  $logInHashedPwd = md5($logInPassword);

  $process = "SELECT * FROM users WHERE email='$logInEmail' AND password='$logInHashedPwd'";
  $res = mysqli_query($connection, $process);

  if (mysqli_num_rows($res) > 0) {
    $row = mysqli_fetch_assoc($res);

    $_SESSION['signUpName'] = $row['name'];

    $_SESSION['signUpBtn'] = "1";
  } else {
    die("Incorrect Email or Password");
  }
}

?>
php html css ajax
1个回答
0
投票

请对此文件进行以下更改并告知我。

  1. 后端.php

session_start();

// add connection code here
// ...

// Login System
if (isset($_POST['logInEmail']) && isset($_POST['logInPassword'])) {
    $logInEmail = $_POST['logInEmail'];
    $logInPassword = $_POST['logInPassword'];
    $logInHashedPwd = md5($logInPassword);

    $process = "SELECT * FROM users WHERE email='$logInEmail' AND password='$logInHashedPwd'";
    $res = mysqli_query($connection, $process);

    if (mysqli_num_rows($res) > 0) {
        $row = mysqli_fetch_assoc($res);

        $_SESSION['signUpName'] = $row['name'];

        $response = array('status' => 'success', 'message' => 'Login successful');
    } else {
        $response = array('status' => 'error', 'message' => 'Incorrect Email or Password');
    }

    echo json_encode($response);
}

2）脚本.js

function checkLogin() {
    var logInEmail = $("#loginemailtxt").val();
    var logInPassword = $("#loginpwdtxt").val();
    if (!logInEmail || !logInPassword) {
        $("#loginNoEmail").toggle(!logInEmail);
        $("#loginNoPassword").toggle(!logInPassword);
        $("#loginIncorrectCreds").hide();
        $("#loginemailtxt").css("border", "2px solid red");
        $("#loginpwdtxt").css("border", "2px solid red");
    } else {
        $.ajax({
            url: "backend.php",
            data: {
                logInEmail: logInEmail,
                logInPassword: logInPassword
            },
            type: "POST",
            dataType: "json", 
            success: function (data) {
                if (data.status === 'success') {
                    // Handle successful login
                    $("#loginemailtxt").css("border", "2px solid green");
                    $("#loginpwdtxt").css("border", "2px solid green");
                    $("#loginIncorrectCreds").hide();
                    window.location.href = 'index.php';
                } else if (data.status === 'error') {
                    $("#loginemailtxt").css("border", "2px solid red");
                    $("#loginpwdtxt").css("border", "2px solid red");
                    $("#loginIncorrectCreds").text(data.message).show();
                }
            },
            error: function () {
                // Handle error case
            }
        });
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.