Проверьте доступность имени пользователя с помощью jQuery и AJAX

Если вы разрешаете пользователю входить в систему со своим именем пользователя и паролем, вы должны убедиться, что каждый пользователь имеет уникальное имя пользователя.

Когда пользователь переходит на регистрацию на вашем сайте, проверьте имя пользователя либо после отправки формы, либо проверьте его с помощью AJAX при входе.

В этом руководстве я использую Jquery AJAX для проверки доступности имени пользователя.

1. Структура таблицы

Я использую таблицу users в учебном примере.

CREATE TABLE `users` ( 
   `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, 
   `username` varchar(80) NOT NULL, 
   `name` varchar(80) NOT NULL, 
   `password` varchar(80) NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Конфигурация

Создайте новый файл config.php.

Завершенный код

<?php 
$host = "localhost"; /* Host name */ 
$user = "root"; /* User */ 
$password = ""; /* Password */ 
$dbname = "tutorial"; /* Database name */ 
$con = mysqli_connect($host, $user, $password,$dbname); 
// Check connection 
if (!$con) { 
    die("Connection failed: " . mysqli_connect_error()); 
}

3. HTML

Создание <div id='div_reg'>, содержащего поля регистрационной формы.

С полем ввода имени пользователя также создано <div id='uname_response' class='response'> для отображения сообщения на экране.

Завершенный код

<div class="container"> 
   <div id="div_reg"> 
     <h1>Registration</h1> 
     <div> 
       <input type="text" class="textbox" id="txt_name" name="txt_name" placeholder="Name"/> 
     </div> 
     <!-- Username --> 
     <div> 
        <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" /> 
        <div id="uname_response" class="response"></div> 
     </div> 
     <div> 
        <input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password"/> 
     </div> 
     <div> 
        <input type="password" class="textbox" id="txt_repwd" name="txt_repwd" placeholder="Re-type Password"/> 
     </div> 
     <div> 
        <input type="submit" value="Submit" name="but_submit" id="but_submit" /> 
     </div> 
  </div> 
</div>

4. CSS

/* Container */ 
.container{ 
  margin: 0 auto; 
  width: 70%; 
} 
/* Registration */ 
#div_reg{ 
  border: 1px solid gray; 
  border-radius: 3px; 
  width: 470px; 
  height: 370px; 
  box-shadow: 0px 2px 2px 0px gray; 
  margin: 0 auto; 
} 
#div_reg h1{ 
  margin-top:0px; 
  font-weight: normal; 
  padding:10px; 
  background-color: cornflowerblue; 
  color:white; 
  font-family: sans-serif; 
} 
#div_reg div{ 
  clear: both; 
  margin-top: 10px; 
  padding: 5px; 
} 
#div_reg .textbox{ 
  width: 96%; 
  padding: 7px; 
} 
#div_reg input[type=submit]{ 
  padding: 7px; 
  width: 100px; 
  background-color: lightseagreen; 
  border: 0px; color: white; 
} 
/* Response */ 
.response{ 
  padding: 6px; 
  display: none; 
} 
.not-exists{ 
  color: green; 
} 
.exists{ 
  color: red; 
}

5. PHP

Создайте новый файл uname_check.php отсюда, проверив значение $_POST['uname'] в таблице user и вернув количество строк.

Завершенный код

<?php 
include "config.php"; 
/* Get username */ 
$uname = $_POST['uname']; 
/* Query */ 
$query = "select count(*) as cntUser from user where username='".$uname."'"; 
$result = mysqli_query($con,$query); 
$row = mysqli_fetch_array($result); 
$count = $row['cntUser']; echo $count; 
?>

6. jQuery

Отправьте запрос AJAX на событие поля имени пользователя change и передавайте его значения в виде данных.

При успешной проверке значение ответа больше 0 или нет. Если оно больше 0, то отображается Username already in use сообщение в <div id='uname_response'>, иначе Available сообщение.

Завершенный код

<script> 
$(document).ready(function(){ 
  $("#txt_uname").change(function(){ 
    var uname = $("#txt_uname").val().trim(); 
    if(uname != ''){ 
      $("#uname_response").show(); 
      $.ajax({ 
        url: 'uname_check.php', 
        type: 'post', 
        data: {uname:uname}, 
        success: function(response){ 
           if(response > 0){ 
              $("#uname_response").html("<span class='not-exists'>* Username Already in use.</span>"); 
           }else{ 
              $("#uname_response").html("<span class='exists'>Available.</span>"); 
           } 
        } 
      }); 
    }else{ 
      $("#uname_response").hide(); 
    } 
   }); 
});
</script>

7. Заключение

В этом уроке я показал, как вы можете проверить, занято ли имя пользователя кем-то или нет с помощью AJAX. Вы можете отправить запрос AJAX на другие события, например. keyup, keydown и т. д. вместо change.

Первоначально опубликовано на makitweb.com.