Tự động kiểm tra giá trị nhập vào từ ô textbox

Quote

các anh ơi chỉ giúp em làm sao kiểm tra giá trị nhập vào từ ô textbox.
ví dụ như từ một form đăng ký trong PHP; khi mình nhập vào từ một username nhập vào đó có tồn tại hay chưa? Khi mình nhấn phím Tab sang ô khác là nó tự động kiểm tra username đó có hợp lệ hay không đưa thông báo cho người dùng nhập lại.
Em cảm ơn.

Đó là kỹ thuật Ajax...

Code để bạn tham khảo:

Database:

Quote

-- Database: `mydatabase`
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`, `name`) VALUES
(1, 'nothing1306', 'Nguyễn Thân'),
(2, 'hpleduit', 'What is your name?');

Trang getuser.php:

Quote

<?php //Directory access is forbidden ?>
<?php
   $u=$_GET["u"];

   $con = mysql_connect('localhost', 'root', '');
   if (!$con)
   {
      die('Could not connect: ' . mysql_error());
   }

   mysql_select_db("mydatabase", $con);

   $sql="SELECT * FROM users WHERE username = '".$u."'";

   $result = mysql_query($sql);
   $num_rows = mysql_num_rows($result);

   if( $num_rows == 0 )
   {
      echo "YES";
   }
   else
   {
      echo "NO";
   }

   mysql_close($con);
?>

Trang index.php:

Quote

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax</title>
<script type="text/javascript" language="javascript">
   var xmlhttp;

   function showUser(str)
   {
      xmlhttp=GetXmlHttpObject();
      if (xmlhttp==null)
      {
         alert ("Browser does not support HTTP Request");
         return;
      }
      var url="getuser.php";
      url=url+"?u="+str;
      url=url+"&sid="+Math.random();
      xmlhttp.onreadystatechange=stateChanged;
      xmlhttp.open("GET",url,true);
      xmlhttp.send(null);
   }

   function stateChanged()
   {
      if (xmlhttp.readyState==4)
      {
         document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
   }

   function GetXmlHttpObject()
   {
      if (window.XMLHttpRequest)
      {
         // code for IE7+, Firefox, Chrome, Opera, Safari
         return new XMLHttpRequest();
      }
      if (window.ActiveXObject)
      {
         // code for IE6, IE5
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      return null;
   }
</script>
</head>

<body>
<form>
   <input type="text" name="nickname" onBlur="showUser(this.value)" /> <div id="txtHint"></div>
</form>
</body>
</html>

Giải thích:
- Người dùng mở trang index.php để thực hiện thao tác đăng ký tài khoản.
- Khi người dùng nhập username vào textfiled "nickname" và nhấn phím "Tab" thì hàm showUser() được thực thi, "this.value" để lấy giá trị của textfiled "nickname" mà người dùng vừa nhập vào.
- Khi hàm showUser() được thực thi... 1 yêu cầu được "gửi ngầm" đến server, cụ thể ở đây là yêu cầu mở trang getuser.php và gửi kèm thông số "u". Giả sử ở textfield "nickname" ta nhập vào là "nothing1306" thì url được gửi ngầm sẽ là "getuser.php?u=nothing1306"
- Khi nhận được yêu cầu, trang getuser.php với thông số "u" có giá trị là "nothing1306" được thực thi [ nó giống việc ta mở trình duyệt lên và nhập vào thanh address là "getuser.php?u=nothing1306" ]
- Lúc này kết quả của trang getuser.php như thế nào thì sẽ được đưa vào trong thẻ (HTML) nào có id là "txtHint" [ cụ thể ở ví dụ này là thẻ "div" ]
- Kết quả... nội dung bên trong thẻ div có id là "txtHint" sẽ hiển thị nội dung của trang getuser.php

Tài liệu tham khảo:
http://www.w3schools.com/PHP/php_ajax_database.asp