在提交表單之前檢查用戶名是否可用

Question

我想檢查用戶名是否在提交表單之前進行。

據我所知，我必須使用AJAX從JavaScript數據庫中獲取數據。我如何將用戶名發送到PHP文件？

這是我的形式：

<form id="loginForm" action="register.php" method="post"> 
 
    <p>Register:</p> 
 
    <p style="text-align: left;">Full name: <br><input type="text" name="name" required/></p> 
 
    <p style="text-align: left;">Email: <br><input type="text" name="email" required/></p> 
 

 
    //Username 
 
    <p style="text-align: left;">Username: <br><input id="username" type="text" name="username" onkeyup="validateUsername(value);" required/></p> 
 
    <span id="usernameError" style="display:none;border:1px solid red;">Username can only contain a-z, 0-9 and must be at least 6 characters loong</span> 
 
    <span id="usernameTaken" style="display:none;border:1px solid red;">Username taken</span> 
 

 
    <p style="text-align: left;">Password: <br><input type="password" name="password" required/></p> 
 
    <input type="submit" value="Register"> 
 
</form>

這是validateUsername()功能：

function validateUsername(username) { 
 
    var re = /[a-zA-Z0-9]/; 
 
    alert(username.length); 
 
    if(re.test(username) && username.length > 5) { 
 
     document.getElementById('username').style.backgroundColor = "green"; 
 
     document.getElementById('usernameError').style.display= "none"; 
 
     --error; 
 
    } else { 
 
     document.getElementById('username').style.backgroundColor = "red"; 
 
     document.getElementById('usernameError').style.display= "block"; 
 
     ++error; 
 
    } 
 
    //here i want to check if the user name is taken 
 
}

如果用戶名稱被佔用，我想顯示'usernameTaken'跨度。 否則，我想隱藏它。

這裏是PHP文件來檢查，如果用戶名是已經在數據庫：

<?php 
 
session_start(); 
 
define('DB_NAME', 'madsanker_dk_db'); 
 
define('DB_USER', 'madsanker_dk'); 
 
define('DB_PASSWORD', 'MyPassword'); 
 
define('DB_HOST', 'mysql43.unoeuro.com'); 
 

 
$link = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD); 
 

 
if (!$link) { 
 
    die('Could not connect: ' .mysqli_error()); 
 
} 
 

 
$db_selected = mysqli_select_db($link, DB_NAME); 
 

 
if (!$db_selected) { 
 
    die('Could not connect: ' .mysqli_connect_error()); 
 
} 
 

 
$username = //The username; 
 
$username = mysqli_real_escape_string($link,$username); 
 

 
$sql = "SELECT * FROM mainLogin WHERE username = '$username'"; 
 

 
$result = mysqli_query($link, $sql); 
 
$count = mysqli_num_rows($result); 
 

 
if($count == 0) { 
 
    //if the username is NOT taken 
 
    return true; 
 
} else { 
 
    //if the username IS taken 
 
    return false; 
 
} 
 
mysqli_close($link); 
 
?>

這是如何完成的？

Answer 1

JS - JQUERY AJAX

$.ajax({ 
    url: 'register.php', data: {action: 'isUserNameTaken', params: [username]}, 
    type: 'post', 
    success: function(data) { 
     //Do Something 
    } 
}); 

PHP

<?php 
 
function isUserNameTaken($username) { 
 
    //Do Something; 
 
} 
 

 
if(!empty($_POST['action'])) { 
 
    $action = $_POST['action']; 
 
    switch($action) { 
 
     case 'isUserNameTaken': 
 
      $username = ''; 
 

 
      if(!empty($_POST['params'])) { 
 
       $username = $_POST['params'][0]; 
 
      } 
 

 
      isUserNameTaken($username); 
 

 
      break; 
 
    } 
 
} 
 
?>

Answer 2

你可以這樣來做： 在客戶端：

function validateUsername(){ 
    if(//test username input for length...) { 
    $.ajax({ 
     type: 'POST', 
     url: 'validate.php', 
     data: { username: username }, 
     success: function(response) { 
       if(response==0){ 
       //username is valid 
       } 
       elseif(response==1){ 
       //username is already taken 
       } 
       elseif(response==2){ 
       //connection failed 
       } 

     } 
    }); 
    } 
    else{ 
    //display "username is too short" error 
    } 

} 

validate.php：

<?php 
session_start(); 
define('DB_NAME', 'madsanker_dk_db'); 
define('DB_USER', 'madsanker_dk'); 
define('DB_PASSWORD', 'MyPassword'); 
define('DB_HOST', 'mysql43.unoeuro.com'); 

$link = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD); 

if (!$link) { 
    die('Could not connect: ' .mysqli_error()); 
    echo json_encode(2); 
} 
else{ 
    $db_selected = mysqli_select_db($link, DB_NAME); 

    if (!$db_selected) { 
     die('Could not connect: ' .mysqli_connect_error()); 
     echo json_encode(2); 
    } 
    else{ 
     $username = $_POST["username"]; 
     $username = mysqli_real_escape_string($link,$username); 

     $sql = "SELECT * FROM mainLogin WHERE username = '$username'"; 

     $result = mysqli_query($link, $sql); 

     $count = mysqli_num_rows($result); 
     if($count == 0) { 
     //if the username is NOT taken 
     echo json_encode(0); 
     }else { 
      //if the username IS taken 
      echo json_encode(1); 
     } 
     mysqli_close($link); 
    } 


} 

?> 

您還可以通過jQuery中與的onkeyup函數調用它，以便使該功能validateUsername每當用戶輸入東西到輸入字段，用戶名將被檢查....