Validação de senha em JavaScript [Configuração passo a passo explicada]

Qualquer site que suporte autenticação e autorização sempre solicita um nome de usuário e senha por meio do login. Caso contrário, o usuário precisa se registrar e criar uma senha para fazer login na próxima sessão e, portanto, os sites tendem a fornecer protocolos ou parâmetros específicos. Os parâmetros a seguir são comumente usados ​​para validação de senha em qualquer formato.

• Somente entradas alfanuméricas são aceitas no campo de senha.
• Deve começar com o alfabeto maiúsculo.
• Pelo menos uma senha do alfabeto maiúsculo.
• A senha deve ter um comprimento específico.
• Um valor numérico deve ser usado na senha.
• A senha deve ter um comprimento mínimo e máximo.

A validação de senha em JavaScript garante que esses parâmetros sejam seguidos quando o usuário cria uma senha. As condições fornecidas devem ser atendidas para a formação de uma senha razoavelmente forte. A estrutura da senha pode ser validada por expressão regular usando código JavaScript.

Para processar a validação de senha usando JavaScript no campo de senha, as etapas abaixo seriam seguidas.

Validação de senha em Javascript

1. Crie um formulário HTML

O formulário deve ter campos básicos como e-mail, telefone e senha. Vamos ver um exemplo de código HTML para definir a estrutura do formulário.

<! DOCTYPE html >

< html lang = “pt” >

< cabeça >

< meta charset = “UTF-8” >

< meta name = “viewport” content = “width=device-width, initial-scale=1.0” >

< title > Formulário </ title >

</ cabeça >

< corpo >

< classe div = “contêiner” >

< form action = “/action_page.php” >

< label for = “usrname” > Endereço de e-mail </ label >

< tipo de entrada = “texto” id = “usrname” nome = “usrname” obrigatório >

< label for = “psw” > Senha </ label >

< tipo de entrada = “senha” id = “psw” nome = “psw” padrão = “(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “Deve conter pelo menos um número e uma letra maiúscula e minúscula e pelo menos 8 ou mais caracteres” obrigatório >

< tipo de entrada = “enviar” valor = “enviar” >

</ formulário >

</ div >

< div id = “mensagem” >

< h3 > A senha deve conter o seguinte: </ h3 >

< p id = “letra” class = “inválido” > A < b > minúscula </ b > letra </ p >

< p id = “maiúscula” classe = “inválido” > A < b > maiúscula (maiúscula) </ b > letra </ p >

< p id = “número” class = “inválido” > A < b > número </ b ></ p >

< p id = “length” class = “invalid” > Mínimo < b > 16 caracteres </ b ></ p >

</ div >

</ corpo >

</ html >

2. Adicionar CSS

entrada {

largura : 100% ;

preenchimento : 12px ;

borda : 1px sólido #ccc ;

raio da borda : 4px ;

box-sizing : border-box ;

margem superior : 6px ;

margem inferior : 16px ;

}

/* Estilize o botão enviar */

entrada [ tipo = enviar ] {

cor de fundo : #4CAF50 ;

cor : branco ;

}

/* Estilize o container para entradas */

.container {

cor de fundo : #f1f1f1 ;

preenchimento : 20px ;

}

#mensagem {

exibição : nenhum ;

fundo : #f1f1f1 ;

cor : #000 ;

posição : relativa ;

preenchimento : 20px ;

margem superior : 10px ;

}

#mensagem p {

preenchimento : 10px 35px ;

tamanho da fonte : 18px ;

}

.válido {

cor : rgb ( 3 , 184 , 190 );

}

.valid:antes {

posição : relativa ;

esquerda : -35px ;

conteúdo : “&#10004;” ;

}

.inválido {

cor : vermelho ;

}

.invalid:antes {

posição : relativa ;

esquerda : -35px ;

conteúdo : “&#10006;” ;

}

Confira: Principais frameworks Javascript em 2021

3. Adicione JavaScript

var minhaEntrada = document . getElementById ( “psw” );

var letra = documento . getElementById ( “carta” );

var capital = documento . getElementById ( “capital” );

var número = documento . getElementById ( “número” );

var comprimento = documento . getElementById ( "comprimento" )

minhaEntrada . foco = função () {

documento . getElementById ( "mensagem" ). estilo . exibição = “bloco” ;

}

minhaEntrada . onblur = function () {

documento . getElementById ( "mensagem" ). estilo . exibição = “nenhum” ;

}

minhaEntrada . onkeyup = function () {

var letras minúsculas = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

carta . classList . remover ( "inválido" );

carta . classList . add ( "válido" );

} senão {

carta . classList . remover ( "válido" );

carta . classList . add ( "inválido" );

}

var letras maiúsculas = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

capitais . classList . remover ( "inválido" );

capitais . classList . add ( "válido" );

} senão {

capitais . classList . remover ( "válido" );

capitais . classList . add ( "inválido" );

}

var números = / [ 0-9 ] / g ;

if ( myInput . value . match ( number )) {

número . classList . remover ( "inválido" );

número . classList . add ( "válido" );

} senão {

número . classList . remover ( "válido" );

número . classList . add ( "inválido" );

}

if ( myInput . value . length >= 8 ) {

comprimento . classList . remover ( "inválido" );

comprimento . classList . add ( "válido" );

} senão {

comprimento . classList . remover ( "válido" );

comprimento . classList . add ( "inválido" );

}

}

O código JavaScript inicialmente recebe um elemento pelo id; depois disso, ele permite que ele seja exibido na tela. Ele também executa condições para obter a senha no formato fornecido. Os alfabetos maiúsculos, minúsculos e os números são validados através da expressão regular criada no código.

4. Expressões Regulares/REGEX

Expressões regulares são padrões para corresponder à combinação original de literais passados ​​no campo. Na validação de senha, o uso da expressão regular do JavaScript desempenha um papel essencial na identificação da string e se ela está no formato fornecido ou não. Expressões regulares são objetos JavaScript. Essas expressões regulares são escritas entre barras no código JavaScript para validação de senha.

Exemplo: deixe re=/ac-b/

Como escrever validação de senha em JavaScript usando expressão regular?

Uma expressão regular é formada por caracteres simples combinados com caracteres especiais. A expressão regular é formada de acordo com os parâmetros ou restrições de uma senha forte. Caracteres especiais são usados ​​quando existe uma correspondência difícil de strings ou caracteres.

O código JavaScript descrito acima fez uso de expressões regulares para encontrar letras maiúsculas, letras minúsculas e números. A expressão é feita com diferentes sequências e subsequências. Existem certas regras para cada caractere usado na expressão regular.

Exemplo: let número=/[0-9]/g. Aceita os números no intervalo de 0-9.

Checkout: Projetos Javascript no Github

Aprenda cursos de software online das melhores universidades do mundo. Ganhe Programas PG Executivos, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.

Conclusão

A validação de senha é crucial, pois permite que o usuário crie uma senha forte e evita possíveis quebras de senha. Usando JavaScript, pode-se adicionar interatividade e, portanto, notificar o usuário até que a senha tenha todos os caracteres necessários em qualquer sequência. A expressão regular codificada em JavaScript desempenha um papel fundamental na definição das sequências. Ele traz os parâmetros escritos para o código JavaScript.

Se você estiver interessado em aprender mais sobre desenvolvimento full-stack, confira o Programa PG Executivo do upGrad & IIIT-B em Desenvolvimento de Software Full-stack, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos e atribuições , IIIT-B Alumni status, projetos práticos práticos e assistência de trabalho com as principais empresas.