Kiểm tra username đã tồn tại với Ajax và PHP

Nếu trang web hay blog của các bạn cho phép người dùng đăng ký thành viên thì ắt hẳn là việc kiểm tra tên người dùng đã đăng ký trước đó hay chưa là việc rất quan trọng và cần thiết. Có rất nhiều cách hay bài viết giúp các bạn kiểm tra tên người dùng. Và trong bài viết này, mình sẽ chia sẻ cho các bạn một cách kiểm tra ngay mà không cần phải tải (reload) lại trang bằng kỹ thuật Ajax và PHP.

HTML

Trước tiên là chúng ta  cần có một form cho phép người dùng đăng ký thành viên, form này đơn giản thôi, chỉ có một field cho phép người dùng nhập tên username cần đăng ký.

<div id="registration-form">

  <label for="username">Enter Username :

  <input name="username" type="text" id="username" maxlength="15">

  <span id="user-result"></span>

  </label>

</div>

Trong đoạn html bên trên có một phần tử với ID là user-result được dùng để hiển thị thông báo kết quả kiểm tra tên người dùng (đã tồn tại hoặc chưa).

jQuery

Sau khi chúng ta đã có form đăng ký, thì việc kế tiếp là sử dụng jQuery để bắt các sự kiện khi người dùng nhập tên người dùng xong .

$("#username").keyup(function (e) {

    //do some stuff

});

Để sử dụng Ajax, chúng ta sẽ sử dụng phương thức $.post, đây là cách dễ dàng nhất để lấy dữ liệu từ server thông qua HTTP POST request.  Đây là đoạn code giúp chúng ta truyển tải giá trị biến username POST từ input field đến trang check_username.php .

$("#username").keyup(function (e) { //user types username on inputfiled

   var username = $(this).val(); //get the string typed by user

   $.post('check_username.php', {'username':username}, function(data) { //make ajax call to check_username.php

   $("#user-result").html(data); //dump the data received from PHP page

   });

});

PHP

Sau khi giá trị người dùng nhập được gửi thông qua Ajax, thì chúng ta sẽ tiến hành kiểm tra xem tên đó đã tồn tại hay chưa bằng trangcheck_username.php. Sau đây là toàn bộ đoạn code cho trang check_username.php, để đảm bảo giá trị nhập vào không phải là các đoạn mã gây nguy hiểm, chúng ta sẽ kiểm tra giá trị nhập vào bằng hàm filter_var và kiểm tra xem có phải nó được gửi thông qua Ajax không bằng cách sử dụng $_SERVER[‘HTTP_X_REQUESTED_WITH’].

###### db ##########

$db_username = 'xxxx';

$db_password = 'xxxx';

$db_name = 'xxxx';

$db_host = 'localhost';

################



//check we have username post var

if(isset($_POST["username"]))

{

    //check if its an ajax request, exit if not

    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        die();

    } 



        //try connect to db

    $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');



    //trim and lowercase username

    $username =  strtolower(trim($_POST["username"]));



    //sanitize username

    $username = filter_var($username, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH);



    //check username in db

    $results = mysqli_query($connecDB,"SELECT id FROM username_list WHERE username='$username'");



    //return total count

    $username_exist = mysqli_num_rows($results); //total records



    //if value is more than 0, username is not available

    if($username_exist) {

        echo '<img src="imgs/not-available.png" />';

    }else{

        echo '<img src="imgs/available.png" />';

    }



    //close db connection

    mysqli_close($connecDB);

}

Nếu các bạn muốn tiến hành làm demo thử cho mình, thì nhớ là đổi lại tên db cho phù hợp nhé. Các bạn có thể download toàn bộ mã nguồn của bài viết này về máy và nếu có thắc mắc gì thì đừng ngần ngại để lại lời nhắn dưới dạng comments nhé, mình sẽ giúp các bạn hoàn thành bài viết này.