04/10/2018, 18:01

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 ...

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.

ajax-username-checker-003

Xem Demo | Download

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 trang check_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.

Chúc các bạn thành công !

Tags: ajax php code Registration Page

Chuyên Mục: PHP

Bài viết được đăng bởi webmaster

  • nhan

    Bạn cho mình hỏi còn muốn thêm pass để sau đó nhấn submit insert vào db thì phải thêm đoạn insert into ở chỗ nào vậy! mình làm vài mà không được

Bài liên quan

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ùi Văn Nam viết 18:01 ngày 04/10/2018

Tạo File Upload hàng loạt với Ajax và PHP

Hôm nay mình sẽ chia sẻ cho các bạn một bài viết về PHP và cách sử dụng Ajax với ứng dụng upload file. Với ứng dụng này các bạn có thể áp dụng vào trong các trang web của mình, ngoài ra các bạn có thể học và hiểu cách sử dụng Ajax, bài viết này rất hữu ích cho những bạn mới bước vào nghề web. ...

Vũ Văn Thanh viết 17:58 ngày 04/10/2018

Kiểm tra sự tồn tại của URL với PHP

Là một nhà quản trị website, chắc hẳn là các bạn sẽ cần tính năng kiểm tra sự tồn tại của URL (tức là xem đường link có tồn tại hay đã bị xóa). Việc làm này rất hữu ích, vì nó giúp bạn kiểm tra những link đã bị hỏng, từ đó các bạn có thể chỉnh sửa lại bài viết cho phù hợp, cũng như nhằm tránh bị ...

Trịnh Tiến Mạnh viết 17:50 ngày 04/10/2018

Kiểm tra quyền truy cập file (file permission) trong PHP

PHP cung cấp cho chúng ta một function là fileperms() được dùng để lấy thông tin quyền truy cập file (file permission). Và dựa vào function này, mình xin chia sẻ cho các bạn một đoạn code dùng để kiểm tra thông tin truy cập file hoặc folder trên web server. <?php function ...

Trần Trung Dũng viết 17:50 ngày 04/10/2018

Sử dụng jquery và asp.net để kiểm tra sự tồn tại của UserName

hmweb- Website của bạn cho phép người dùng đăng ký nhưng bạn muốn kiểm tra nếu chưa tồn tại UserName thì mới đăng ký. Trong bài viết này tôi sẽ hướng dẫn các bạn cách đơn giản để kiểm tra sự tồn tại của UserName sử dụng jquery và asp.net hmweb- Website của bạn cho phép ...

Bùi Văn Nam viết 20:45 ngày 02/10/2018
0