使用PHP和JavaScript驗證表格

Question

我在這裏有一些HTML元素的註冊表單。我需要驗證服務器端和客戶端的元素，我將解釋原因。例如，我使用HTML格式：

<form action="<?=$_SERVER['PHP_SELF']?>" method="post"> 
    User name:<input type="text" name="user_name"/><br/> 
    Email:<input type="text" name="user_email"/><br/> 
    Password:<input type="text" name="user_password"/><br/> 
</form> 

我使用PHP來檢查電子郵件和用戶是否已經存在於數據庫中。我可以使用PHP來確定輸入字段是否爲空。

if (isset($_POST['submit'])) 
{ 
    $user_name = $_POST['user_name']; 
    $user_email = $_POST['user_email']; 
    $user_password = $_POST['user_password']; 

    $exists = ""; 
    $sql = "SELECT user_name from users WHERE user_name = '{$user_name}' LIMIT 1"; 
    $stmt = $connection->prepare($sql); 
    $stmt->execute(); 

    $num = $stmt->rowCount(); 

    if ($num == 1) 
    { 
     $exists .= "u"; 
    } 

    $sql = "SELECT user_email from users WHERE user_email = '{$user_email}' LIMIT 1"; 
    $stmt = $connection->prepare($sql); 
    $stmt->execute(); 

    $num = $stmt->rowCount(); 

    if ($num == 1) 
    { 
     $exists .= "e"; 
    } 

    if (empty($user_name) || empty($user_email) || empty($user_password)) 
    { 
     echo "<script>alert('Please fill all input fields to register!');</script>"; 
    } 
    else if($exists == "u") 
    { 
     echo "<script>alert('This user is already registered in our system.');</script>"; 
    } 
    else if($exists == "e") 
    { 
     echo "<script>alert('This email is already registered in our system.');</script>"; 
    } 
    else if($exists == "ue") 
    { 
     echo "<script>alert('This user and this email are already registered in our system.');</script>"; 
    } 
    else 
    { 
     //Here insert the values in database 
    } 
} 

看起來很完美，除了一件事：當我點擊提交頁面刷新和所有的輸入字段值被清除。這很糟糕，因爲用戶必須再次輸入所有信息，因爲出現了問題。我知道這是因爲我使用PHP發送後驗證了表單。爲了克服這個問題，我需要在發送表單之前驗證字段，邏輯上在客戶端使用JavaScript。但是如何在數據庫中檢查？我將需要使用PHP。如果我不需要檢查數據庫，我只能使用JavaScript。我必須將驗證與JavaScript和PHP混合，我認爲我應該使用AJAX，但不知道如何。

Answer 1

個人而言，我會做客戶端級（JavaScript的）不是在PHP但嘿，如果你堅持嘗試這種

if ($_POST["password_user"] != $_POST["confirm_password"]) 
    echo "<script>alert('The entered passwords doesn't match. Try again.'); 
     document.getElementByID('inputPassword').value = $_POST['password_user']; 
     document.getElementByID('inputConfirmPassword').value = $_POST['confirm_password']; 
     </script>"; 

而且更新HTML輸入支票有ID

Password:<font color="red">*</font> 
<input id="inputPassword" type="password" name="password_user"/><br/> 
Confirm password:<font color="red">*</font> 
<input id="inputConfirmPassword" type="password" name="confirm_password"/><br/> 

編輯：

加好AJAX教程：

• without JQuery
• with JQuery（我個人覺得這更容易使用）

EDIT2：

示例代碼PHP（服務器端），它返回一個JSON被反饋給客戶端（JavaScript的）

<?php 
$canLogin = false; 
$responseArray = array(); 
// your logic here 
// .... 
if ($canLogin) 
{ 
    $responseArray["status"] = "Success";   
} else 
{ 
    //Use the appropriate HTTP header (default 200), this is sometimes missed by developers 
    http_response_code(404); 
    $responseArray["status"] = "Error"; 
} 

return json_encode($responseArray); 
?>