Kiểm tra sự tồn tại của tên người dùng bằng ajax và php

Demo || Download code

1. PHẦN HTML
Phần này các bạn chỉ cần chú ý đến input text với id và name là "user_name" và 1 form bao bọc bên ngoài, các phần còn lại chỉ là râu ria trang trí cho đẹp thôi. Bên cạnh đó là 1 thẻ div với class="thongbao" để thông báo kết quả kiểm tra username đó có tồn tại hay không.

Mã:

<form method="post" name="fcheck" id="fcheck" action="">
<img src="logo_2cwebvn.png" width="213" height="115" style="float:left;border:1px solid #EAEAEA;padding:10px;">
<div style="margin-left:240px;">
    <label for="user_name">Tên người dùng:</label>
    <input type="text" name="user_name" id="user_name" autocomplete="off" value="">
    <div class="thongbao"></div>
    <input type="button" id="btn" name="btn" value="Send Now">
</div>
<div>
   
    <div class="lstcheck" style="color:#DB2E66; margin-top:30px; text-align:center;">
        Username tồn tại: 2cweb, 2cwebvn, chickchick
    </div>
</div>
</form>

2. PHẦN CSS
Để chi tiết cho phần CSS này mình chia ra các phần nhỏ để cho các bạn dễ đọc. Phần đầu tiên là mình phải reset style của trình duyệt và định dạng một chút cho trang.

Mã:

/*========= RESET STYLE TRÌNH DUYỆT & ĐỊNH DẠNG TRANG ========*/
@charset "utf-8";
*{margin:0px; padding:0px;}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: url(bg_2cwebvn.png) repeat;
    color:#DB2E66;
} 

Tiếp theo sẽ là định dạng cho cho các phần tử trong form:

Mã:

/*========= ĐỊNH DẠNG CÁC PHẦN TỬ TRONG FORM ========*/
#fcheck{
    width:510px; margin:auto;
    border:1px solid #ccc;
    background:#FFFCF7; padding:10px;
}
 
.error { color: red; font-size: 14px; }
 
.success { color: #006600; font-size: 14px; }
 
label,#user_name { display:block; padding:5px 0px;}
 
#user_name{width:200px;}
 
h2{width:430px; margin:50px 0px 20px;}
 
.thongbao{margin-top:5px;}
 
#btn{
    width:90px; padding:6px;
    color:#006600; font-weight:bold;
    margin:10px 0px;
    border:1px solid #999999;
    }

3. PHẦN AJAX

Mã:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Tiếp theo là code AJAX cho ứng dụng, ở đây mình dùng sự kiện blur() cho input user_name, sự kiện này xảy ra khi con chuột của mình không còn focus trong input user_name nữa. Và không cần nói gì nhiều mình đã có chú thích hết cho các bạn rồi đó, rất dễ hiểu phải không nào.

Mã:

<script type="text/javascript">
$(document).ready(function() {
 
    // Sự kiện khi focus vào user_name
    $("#user_name").blur(function() {
       
        if($(this).val() != ''){
            // Gán text cho class thongbao trước khi AJAX response
            $(".thongbao").html('checking username...');
        }
        // Dữ liệu sẽ gởi đi
        var form_data = {action: 'check_user',  user_name: $(this).val()};
       
        $.ajax({
            type: "POST",              // Phương thức gởi đi
            url: "check.php",          // File xử lý dữ liệu được gởi
            data: form_data,            // Dữ liệu gởi đến cho url
            success: function(result) { // Hàm chạy khi dữ liệu gởi thành công
                $(".thongbao").html(result);   
            }
        });
       
    });
 
});
</script>

Phần code ajax trên sẽ link đến file check.php để xử lý kiểm tra username. Nội dung file check.php như sau:

Mã:

$action = $_POST['action']; // Lấy giá trị action
if(!empty($_POST['user_name']) && $action == 'check_user')
{
    // Lấy giá trị user_name
    $user = $_POST['user_name'];
   
    // Chuyển giá trị user_name thành chữ thường & gọi hàm kiểm tra
    username_exist(strtolower($user));
}
 
function username_exist($user)
{
    // Mảng giá trị user_name đã tồn tại
    $user_arr = array("2cweb", "2cwebvn", "chickchick");
   
    // Kiểm tra user_name mình nhập vào có nằm trong mảng đó hay không?
    // User_name thuộc 1 giá trị trong mảng => user_name tồn tại
    if(in_array($user, $user_arr))
    {
        echo "<span class="error">Username: <strong>{$user}</strong> đã tồn tại, sorry.!!</span>";
    }
    else // Ngược lại user_name Ko tồn tại
    {
        echo "<span class="success">Username: <strong>{$user}</strong> Ko tồn tại, oh yeh..</span>";   
    }
}

Nguồn: http://2cweb.vn/news/php-mysql/kiem-tra-ten-nguoi-dung-ton-tai-voi-php-va-ajax-12-76.html

Đơn giản thế thì đưa ajax vào làm gì
SESSION khi load trang mới kiểm tra được tên đã tồn tại trong CSDL hay chưa, còn cái này nhập từ form xong, bấm kiểm tra là nó hiển thị kết quả luôn.
Xem demo nhé