Comprobar si el nombre de usuario existe con jQuery y PHP
Fecha Publicación:
12 de Febrero de 2020
Fecha Modificación:
03 de Noviembre de 2023
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:
Primero vamos con el código del archivo que contiene el Formulario padre:
Html:
<input name="nick" type="text" required id="nick" size="15" maxlength="15"/>
<div id="Info"></div>
Script:
<script src="/include/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nick').blur(function(){
var username = $(this).val();
if( username !="" ){ /*Inicio si 2*/
/*$('#submitbutton').attr('disabled', 'disabled'); */
$('#Info').html('<img src="/webadmin/mantenimiento/GestorUsuarios/loader.gif" alt="" />').fadeOut(1000);
//alert(username);
var dataString = 'nick='+username;
$.ajax({
type: "POST",
url: "/webadmin/mantenimiento/GestorUsuarios/_compueba-usuario-existe.php",
data: dataString,
success: function(data) {
$('#Info').fadeIn(1000).html(data);
}
}); /* fin ajax*/
}/*--fin si 2*/
});
});
</script>
Por último vamos con el código del archivo PHP que comprueba si el usuario existe:
_compueba-usuario-existe.php:
Definiendo Estilos:
<style type="text/css">
#Error{
background-image:url(/webadmin/mantenimiento/GestorUsuarios/no.jpg);
background-repeat:no-repeat;
background-position:left;
color:#FF0000;
padding-left:33px;
height:19px;
padding-top:6px;
padding-right:10px;
/*float: left; */
margin-left: 8px;
}
#Success{
background-image: url(/webadmin/mantenimiento/GestorUsuarios/yes.jpg);
background-repeat: no-repeat;
background-position: left;
color: #669933;
padding-left: 33px;
height: 19px;
padding-top: 6px;
padding-right: 10px;
/*float: left; */
margin-left: 8px;
}
</style>
<?php
sleep(1);
include $_SERVER['DOCUMENT_ROOT']."/_config.php";
if($_REQUEST) {
$username = $_REQUEST['nick'];
$query = "select * from _usuarios where LOWER(nick) = '".strtolower($username)."'";
$results = db_query( $query) or die('ok');
if(db_num_rows(@$results) > 0) {
echo '<div id="Error">Usuario ya existente</div>';
echo "<script>
document.getElementById('nick').value='',
document.getElementById('nick').focus()</script>";
}else{
echo '<div id="Success">Disponible</div>';
}
}
?>
Articulo : 1341 - Veces Leidas