Linux / PHP / Java / Designer

As melhores dicas estão aqui.

Confirmação de senha com JS

| 0 comentários

Verificar se as senhas correspondem é algo essencial para quem trabalha com sistema de cadastro onde é necessário cadastrar uma senha.

Nesta matéria de hoje vou explicar detalhadamente como fazer para verificar se as senhas correspondem.

Para isso vou utilizar o Notepad++, um exemplo desta matéria funcionando aqui .

Imagino que seu formulário já esteja pronto, nele deve conter 2  campos de senha e um com paragrafo para exibir o resultado.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Verificação de senha.</title>
</head>
<body>
<form method="post" action="#" name="frmCadastro">
<p>Senha: <input type="password" name="senha1" /></p>
<p>confirmar Senha: <input type="password" name="senha2" /></p>
<p id="resultado"></p>
</form>
</body>
</html>

 

Com nossa página pronta devemos criar um ID para cada campo password e adicionar um evento onkeyup, este evento executa uma ação quando o usuário solta uma tecla pressionada, ou seja, quando o botão foi pressionado e solto.

 

<p>Senha: <input onkeyup="verificarSenha();"type="password" id="senha01" name="senha01" /></p>
<p>confirmar Senha: <input onkeyup="verificarSenha();"type="password" id="senha02"
name="senha02"/></p>

 

Depois que os eventos e ID foram criados vamos a nossa programação, ela deve ser inserida dentro da Tag <head> e antes de </head>.

 

Abaixo esta o código, todo comentado e explicado.

<script type="text/javascript"//Iniciamos uma escrita em Javascript
function verificarSenha(){ //Criamos uma função com o nome verificarSenha
var campo1 = document.getElementById("senha01").value;// Na variável campo 1 pegamos o valor co campo onde o Id é senha01.
var campo2 = document.getElementById("senha02").value;// Na variável campo 2 pegamos o valor co campo onde o Id é senha02.
if(campo1 == campo2){ // Verificamos se o valor do campo 1 é o mesmo do campo 2 e se for...
document.getElementById("resultado").innerHTML = "&raquo; As senhas são iguais."//No ID resultado exibimor um texto: As senhas são iguais.
document.getElementById("resultado").style.color = "#008B45";// No mesmo ID alteramos a cor do texto para um verde escuro "SpringGreen4";
}else// se os valores dos campos forem diferentes..
document.getElementById("resultado").innerHTML = "As senhas não correspondem.";//No ID resultado exibimor um texto: As senhas não correspondem.
document.getElementById("resultado").style.color = "#FF6347";// No mesmo ID alteramos a cor do texto para um vermelho clarinho "Tomato1";
// fechamos nosso else
// fechamos nossa função
</script>

Espero que tenham aprendido, lembrando que se você não criar os ID nem criar um evento nada ira funcionar, pois o evento chama a função e dentro da função achamos os campos na página através do ID.

 

Matéria original em: http://satellasoft.com/?materia=confirmacao-de-senha-com-js

Deixe uma resposta

Campos requeridos estão marcados *.