// Início jQuery
$(document).ready(function(e) {
// evento click no botão login (quando eu clicar no botão login ele vai executar esses comandos)
$("#btnLogin").click(function(e){ // Ao clicar no botão login do formulário, irá executar os comandos abaixo.
var vLogin = $("#cmpLogin").val(); // Estou recebendo o valor do campo Login
var vSenha = $("#cmpSenha").val(); // Estou recebendo o valor do campo Senha
if (vLogin.length == 0) { // Aqui eu verifico se digitou algo no login
alert("Atenção\nO campo Login é obrigatório.");
$("#cmpLogin").focus(); // Faço o foco voltar para o campo de login
} else if (vSenha.length == 0) { // Aqui eu verifico se digitou algo no login
alert("Atenção\nO campo Senha é obrigatório.");
$("#cmpSenha").focus();// Faço o foco voltar para o campo de senha
} else { // Caso o login e senha estiverem preenchidos, entra aqui.
// Aqui vou usar o ajax (jquery), onde ele vai verificar em outro arquivo se o usuário e senha existe
$.post("info.php", {login: vLogin, senha: vSenha}, function(retorno){
if(retorno) { // caso o retorno for TRUE
$("#sucessoLogin").fadeIn("fast", function(e){ // Exibir o bloco de mensagem de sucesso
$("#sucessoLogin").delay(1500).fadeOut("fast"); // Depois de exibido, eu dou um tempo de 1,5 segundos
$("body").delay(1500).fadeOut('fast', function(e){ // Depois oculto toda o body e redireciono (apenas efeitos.)
window.location="https://www.scriptbrasil.com.br/forum/";
})
});
} else { // caso o retorno for FALSE
$("#cmpLogin").focus().select(); // defino o foco e seleciono o campo todo
$("#falhaLogin").fadeIn("fast", function(e){ // Exibir o bloco de mensagem de erro
$("#falhaLogin").delay(1500).fadeOut("fast"); // Depois de exibido, eu dou um tempo de 1,5 segundos e escondo.
});
}
});
}
})
});
E por último o arquivo php onde vou verificar se o usuário e senha existem com o ajax.
Como é um exemplo simples utilizei fixo o usuário admin e senha admin, o correto é fazer a conexão com um banco de dados.
Pergunta
Guilherme Catini
Boa tarde galera, tudo bem?
Estou aqui para postar um tutorial básico de um formulário de login simples, usando HTML, CSS, jQuery, Ajax e Javascript.
O Exemplo vocês podem visualizar neste link
http://www.catini.org/exemplos/login/formLogin.html
Começando pelo HTML.
Agora o arquivo de estilos (CSS)
Agora o arquivo JS (Javascript)
E por último o arquivo php onde vou verificar se o usuário e senha existem com o ajax.
Como é um exemplo simples utilizei fixo o usuário admin e senha admin, o correto é fazer a conexão com um banco de dados.
O código está todo comentado, qualquer dúvida, podem perguntar.
Achei legal postar isso pois ele ensina um pouco de tudo, e por ser simples as vezes abre a cabeça de quem tem algumas dúvidas sobre essas linguagens.
Editado por Guilherme CatiniLink para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.