Checker de Disponibilidade de Usuário em jQuery, PHP e MySQL

Checa o banco de dados para verificar se um usuário existe ou não e retorna verdadeiro ou falso.

O JavaScript

1. Então, para começar temos o nosso jQuery em função documento pronto, dentro deste temos um ouvinte de evento. Keyup função que quando acionada corre a função ‘username_check “.
2. Dentro da função ‘username_check’, em primeiro lugar atribuir ‘username’ a variável com o valor do campo de entrada com o nome ID #.
3. Vamos agora executar algumas verificações que o campo de entrada de nome de usuário não é vazia e que os seus 4 ou mais caracteres de comprimento. Se tudo estiver ok ea variável nome de usuário é de 4 caracteres podemos ir em frente e fazer a solicitação ajax.

Vale a pena notar que, porque estavam checando o nome de usuário no banco de dados sobre keyUp nós estamos fazendo um pedido único de cada vez. Para ajudar a limitar essas solicitações nós verificamos que o nome de usuário é mais do que 4 caracteres antes do espectáculo um pedido de AJAX.

[sourcecode language=”javascript”]</pre>
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js’></script>
<script>
$(document).ready(function(){

$(‘#username’).keyup(username_check); });

function username_check(){

var username = $(‘#username’).val();

if(username == ” || username.length < 4){
$(‘#username’).css(‘border’, ‘3px #CCC solid’);
$(‘#tick’).hide();
}else{
jQuery.ajax({
type: ‘POST’, url: ‘check.php’, data: ‘username=’+ username, cache: false, success: function(response){
if(response == 1){
$(‘#username’).css(‘border’, ‘3px #C33 solid’);
$(‘#tick’).hide(); $(‘#cross’).fadeIn();
}else{
$(‘#username’).css(‘border’, ‘3px #090 solid’);
$(‘#cross’).hide(); $(‘#tick’).fadeIn();
}
}
});
}
}
</script>
<pre>

[/sourcecode]

Olhando para ‘check.php’

Este é o código que verifica o banco de dados para ver se o usuário existe ou não. dbConnector.php é a classe de conexão com o banco que eu uso em todos os meus projetos e é no download dos arquivos do projeto.

A primeira coisa que fazemos é cortar qualquer espaço em branco e converter a string para minúsculas. Eu já garantiu que os usernames no banco de dados são todas minúsculas. Assim, os nomes não são caso sensível quando um usuário digita uma para a caixa.

IMPORTANTE! porque estamos a lidar com desconhecidos dados gerado por usuários temos que usar o mysql_escape_string () para parar a injeção de SQL e para tirar quaisquer caracteres indesejados

Observe que eu omiti o tag php passado. Se uma página contém somente o código PHP, a melhor prática é omitir a tag de fechamento PHP (>). PHP não exige o fim da tag em PHP somente as páginas.

Incluindo a tag final pode causar injeção indesejada de espaços à direita branca que pode causar erros de cabeçalho já foi enviado.

[sourcecode language=”php”]

</pre>
<?php
include(‘dbConnector.php’);
$connector = new DbConnector();
$username = trim(strtolower($_POST[‘username’]));
$username = mysql_escape_string($username);
$query = ‘SELECT username FROM usernameCheck WHERE username = ‘.$username.’ LIMIT 1′;
$result = $connector->query($query); $num = mysql_num_rows($result); echo $num; mysql_close();
?>
<pre>

[/sourcecode]

O HTML

Aqui é o campo de formulário de entrada e as duas imagens.

[sourcecode language=”html”]

</pre>
Username:
<input name="username" id="username" type="text" />
<img id="tick" src="tick.png" width="16" height="16"/> <img id="cross" src="cross.png" width="16" height="16"/>
<pre>

[/sourcecode]

O CSS

Aqui está o estilo básico para formatar o campo de entrada de nome de usuário, e para ocultar a imagem do carrapato e cruz.

[sourcecode language=”css”]
#username{
padding:3px;
font-size:18px;
border:3px #CCC solid;
}

#tick{display:none}
#cross{display:none}
&lt;pre&gt;
[/sourcecode]

Para ver uma demostração clique aqui, para baixar clique aqui.

Fonte: http://papermashup.com/jquery-php-mysql-username-availability-checker/