Blog Reacción Estudio

¡Tu zona de aprendizaje!

Comprobar si el nombre de usuario existe con jQuery y PHP

Para comprobar durante el proceso de registro si el nombre de usuario está disponible, todo esto sin recargar la página, podemos utilizar el siguiente código:

  1. Primero vamos con el código del archivo que contiene el formulario de registro:

jQuery

$(document).ready(function(){
		 		
	var consulta;
		
	//hacemos focus
	$("#usuario").focus();
								
	//comprobamos si se pulsa una tecla
	$("#usuario").keyup(function(e){
		 //obtenemos el texto introducido en el campo
		 consulta = $("#usuario").val();
						 
		 //hace la búsqueda
		 $("#resultado").delay(1000).queue(function(n) { 	
							
			$("#resultado").html('<img src="ajax-loader.gif" />');
							
				$.ajax({
					type: "POST",
					url: "comprobar.php",
					data: "b="+consulta,
					dataType: "html",
					error: function(){
						alert("error petición ajax");
					},
					success: function(data){ 									
						$("#resultado").html(data);
						n();
					}
			});
							
		 });
					 
	});
				 
});

HTML

<input type="text" id="usuario" />         
<div id="resultado"></div>

  1. Por último vamos con el código del archivo PHP que comprueba si el usuario existe:
<?php
	$user = $_POST['b'];
	
	if(!empty($user)) {
		comprobar($user);
	}
	
	function comprobar($b) {
		$con = mysql_connect('localhost','root', 'root');
		mysql_select_db('masajes', $con);
	
		$sql = mysql_query("SELECT * FROM usuarios WHERE nombre = '".$b."'",$con);
		
		$contar = mysql_num_rows($sql);
		
		if($contar == 0){
			echo "<span style='font-weight:bold;color:green;'>Disponible.</span>";
		}else{
			echo "<span style='font-weight:bold;color:red;'>El nombre de usuario ya existe.</span>";
		}
	}	
?>

Podéis descargar imágenes de carga para Ajax usando de este generador online:

http://www.ajaxload.info/