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

08 ago, 2012
By wiliamluis
4 Comments
0
AJAX, Classes, CSS, Dicas, JavaScript, JQuery, PHP

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

O JavaScript

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 “.
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 #.
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.

</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>

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.


</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>

O HTML

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


</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>

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.

#username{
 padding:3px;
 font-size:18px;
 border:3px #CCC solid;
}

#tick{display:none}
#cross{display:none}
&lt;pre&gt;

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

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