É necessário incluir campos de confirmação de senha ao criar formulários on-line que solicitam que os usuários definam uma senha. O campo de senha oculta a entrada do usuário por padrão, tornando necessário ter algum tipo de mecanismo que permita ao usuário confirmar que escreveu a senha correta sem cometer erros de digitação. O campo de confirmação de senha solicita que o usuário verifique novamente sua senha se digitar incorretamente algum caractere e os campos de senha e confirmação de senha não corresponderem.
Neste post nosso objetivo é fazer um formulário HTML que corresponda à entrada do usuário no Senha e Confirme a Senha campos para confirmar se o usuário digitou a senha correta ou cometeu algum erro de digitação.
Etapa 1: formulário HTML
O primeiro passo é fazer um formulário HTML que recebe a entrada do usuário:
< Centro >
< h2 > Dica Linux h2 >
< Formato >
< p > Digite a senha p >
< entrada modelo = 'senha' Eu iria = 'passar' > < br >< br >
< p > Confirme a Senha p >
< entrada modelo = 'senha' Eu iria = 'confirmar a senha' > < br >< br >
< botão modelo = 'enviar' ao clicar = 'ConfirmaÇão Da Senha()' > Registro dentro botão >
Formato >
Centro >
Criamos um formulário HTML simples que possui dois campos de entrada do tipo senha e um botão Login que chama o ConfirmaÇão Da Senha() função quando é clicado.
Etapa 2: validação do formulário JavaScript
Agora vamos escrever código JavaScript dentro do ConfirmaÇão Da Senha() função que valida a senha:
função ConfirmaÇão Da Senha ( ) {
var senha = document.getElementById ( 'passar' ) .valor;
var confirmPassword = document.getElementById ( 'confirmar a senha' ) .valor;
E se ( senha == '' ) {
alerta ( 'Erro: O campo de senha está vazio.' ) ;
} senão E se ( senha == confirmSenha ) {
alerta ( 'Logado' ) ;
} senão {
alerta ( 'Por favor, certifique-se de que suas senhas correspondem.' )
}
}
Dentro de ConfirmaÇão Da Senha() função, primeiro obtemos os valores de senha e confirmamos os campos de senha e os armazenamos dentro de variáveis. Em seguida, usamos instruções condicionais para verificar diferentes casos.
Caso 1: o campo de senha está vazio
A primeira condicional verifica se o campo de senha está vazio. Solicitamos que o usuário digite a senha se o campo estiver vazio:
Caso 2: as senhas correspondem
Caso as senhas correspondam, o usuário loga com sucesso:
Caso 3: As senhas não correspondem
Se as senhas não corresponderem, solicitamos ao usuário que digite novamente as senhas e verifique se elas correspondem:
O código JavaScript e HTML juntos se parece com isso:
< html >
< corpo >
< Centro >
< h2 > Dica Linux h2 >
< Formato >
< p > Digite a senha p >
< entrada modelo = 'senha' Eu iria = 'passar' > < br >< br >
< p > Confirme a Senha p >
< entrada modelo = 'senha' Eu iria = 'confirmar a senha' > < br >< br >
< botão modelo = 'enviar' ao clicar = 'ConfirmaÇão Da Senha()' > Registro dentro botão >
Formato >
Centro >
corpo >
< roteiro >
função ConfirmaÇão Da Senha ( ) {
var senha = document.getElementById ( 'passar' ) .valor;
var confirmPassword = document.getElementById ( 'confirmar a senha' ) .valor;
E se ( senha == '' ) {
alerta ( 'Erro: O campo de senha está vazio.' ) ;
} senão E se ( senha == confirmSenha ) {
alerta ( 'Logado' ) ;
} senão {
alerta ( 'Por favor, certifique-se de que suas senhas correspondem.' )
}
}
roteiro >
html >
Conclusão
Os humanos muitas vezes podem cometer erros, mas isso não deve impedi-los de fazer login em suas contas. Mesmo o menor erro ao digitar uma senha pode restringir o acesso de um usuário à sua conta. Portanto, é sempre uma boa ideia verificar novamente a senha de um usuário para confirmar que ele digitou a correta.