6.6 Validar senhas com o método match()
O método match( ) é ótimo para implementar uma política de senhas em um sistema. Com ele, é possível verificar a existência de letras maiúsculas, minúsculas, números e símbolos em uma string. Seu funcionamento utiliza o conceito de expressões regulares. Uma expressão regular contém um conjunto de caracteres que indicam um padrão a ser pesquisado. Esse assunto, expressões regulares, é amplo e existem diversos livros dedicados ao tema. Vamos utilizá-los de uma forma simples, porém adequada ao que pretendemos aqui: validar os caracteres que compõem uma senha.
A sintaxe básica do método match( ) a ser utilizada nesta seção está descrita a seguir:
var vetor = palavra.natch(/[A-Z]/g);
/ [A-Z] / é o padrão de expressão regular que se deseja encontrar na palavra. A opção g (global) indica que a pesquisa deve retornar todas as ocorrências dos caracteres na string. O retorno é um vetor contendo os elementos encontrados ou null, caso o padrão não exista na string fornecida. Observe os seguintes exemplos:
<script> var palavra = "#SenhA_1231"; var vetorl = palavra.natch(/[a-z]/g); // e,n,h var vetor2 = palavra.natch(/[A-Z]/g); // S,A var vetor3 = palavra.natch(/[0-9]/g); // 1,2,3 var vetor4 = palavra.natch(/\W|_/g); // var vetorS = palavra.natch(/[T-Z]/g); // null </script>
Para vetor 1, foram atribuídas as letras minúsculas da senha. Enquanto vetor2 ficou com as letras maiúsculas e vetor3, com os números. Já para vetor4, utilizou-se o metacaractere \W que possui um significado especial na expressão regular e que retorna os símbolos da string analisada. Como o underline “_” não é recuperado pelo \W, acrescentamos (que significa ou “_”). Por último, vetor5 ficará com null, pois não há letras maiúsculas entre T e Z na senha avaliada.
Existem diversas outras opções para montar o padrão de pesquisa da expressão regular, como verificar se há palavras na string que iniciam ou terminam por determinados caracteres ou, então, quais os caracteres que estão fora de um determinado padrão. Porém, com os exemplos anteriormente apresentados, já é possível criar um programa que implemente uma política de senhas em relação as suas regras de composição.
Vamos, então, construir um exemplo de programa de validação de senhas?
Suponha que, para ser válida, uma senha deva possuir as seguintes regras de composição:
- Possuir entre 8 e 15 caracteres;
- Possuir, no mínimo, 1 número;
- Possuir, no mínimo, 1 letra minúscula;
- Possuir, no mínimo, 2 letras maiúsculas;
- Possuir, no mínimo, 1 símbolo.
As figuras 6.7 e 6.8 ilustram o funcionamento desse programa.
Exemplo 6.6 – Código HTML do Programa Valida Senha (ex6_6.html)
<!DOCTYPE html> <html lang="pt-br"> <head> <neta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/estilos.css"> <title>Exemplo 6.6</title> </head> <body> <img src="img/ex6_6.jpg" alt="Senha"> <hl> Programa Valida Senha </hl> <p> Senha: <input type="text" id="inSenha"> </P> <input type="button" value="Verificar Validade da Senha" id="btVerificar"> <h3 id="outResposta"x/h3> <script src="js/ex6_6.js"></script> </body> </html>
A página HTML contém um campo <input type=” text” … > que permite visualizar o que é digitado. Você pode substituir text por password nesse comando para ofuscar os caracteres das senhas. O browser exibe um círculo (Chrome, Firefox, Safari e Edge) ou um asterisco (Opera) para cada caractere digitado.
Programa JavaScript de validação da senha (js/ex6_6.js)
function verSenha() {
// cria referência aos elementos da página
var inSenha = document.getElementById("inSenha");
var outResposta = document.getElementById("outResposta");
// obtém o conteúdo do campo de entrada
var senha = inSenha.value;
var erros = []; // vetor com erros
// verifica se o tamanho da senha é inválido
if (senha.length < 8 || senha.length > 15) {
erros.push("possuir entre 8 e 15 caracteres");
}
// verifica se não possui números
if (senha.match(/[0-9]/g) == null) {
erros.push("possuir números (no mínimo, 1)");
)
// verifica se não possui letras minúsculas
if (!senha.match(/[a-z]/g)) {
erros.push("possuir letras minúsculas (no mínimo, 1)");
}
// verifica se não possui letras maiúsculas ou se possui apenas 1
if (!senha.match(/[A-Z]/g) || senha.match(/[A-Z]/g).length == 1) { erros.push("possuir letras maiúsculas (no mínimo, 2)");
}
// verifica se não possui símbolos ou
if (!senha.match(/[\W|_]/g)) {
erros.push("possuir símbolos (no mínimo, 1)");
}
// se vetor está vazio (significa que não foram encontrados erros)
if (erros.length == 0) {
outResposta.textContent = "Ok! Senha Válida"
} else {
outResposta.textContent = "Erro... A senha deve " + erros.join(", ");
}
}
// cria referência ao botão e após associa function ao evento click
var btVerificar = document.getElementById("btVerificar");
btVerificar.addEventListener("click", verSenha);
O programa JavaScript recupera a senha informada pelo usuário. Em seguida, cria um vetor que vai armazenar os erros encontrados. Caso um padrão de caracteres não seja focalizado na senha, uma nova mensagem é inserida no vetor. No final, verifica-se o número de elementos do vetor. Caso seja 0, significa que a senha cumpre as regras de composição estabelecidas. Observe que podemos testar se o retorno do método é == null ou, então, se ele é false (!).
