Como Medir a Força de uma Senha com JavaScript / jQuery

Medir a força de uma senha é relativamente simples. O método nativo match() do JavaScript permite encontrar determinados caracteres dentro de uma string.

Entenda o método match()

Por exemplo, vamos supor que eu precise encontrar a palavra Mundo dentro de uma string “Olá Mundo!”, teríamos algo como:

var texto="Olá Mundo!";
if (texto.match('Mundo')) alert('encontrei');

Agora que você entendeu como funciona o método, seguindo este mesmo raciocínio podemos criar uma cadeia de caracteres e usar o método match() para se uma cadeia possui determinados caracteres. Para isso precisamos definir quais são estas cadeias. Considerando que uma boa senha deve ter letras másculas, minúsculas, números e caracteres especiais (!@#$%¨&*()_+-=) então podemos definir;

var numeros = /([0-9])/;
var alfabeto = /([a-zA-Z])/;
var chEspeciais = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;

Definindo as regras para medir a força da senha

Com as cadeias já definidas, basta aplicar uma estrutura de IF / ELSE para checar se a senha digitada utiliza ao menos 1 caractere de cada cadeia.

Outra regra que iremos definir é a senha deve ter no mínimo 6 caracteres.

Esta é uma ideia de como criar uma função seguindo as regras definidas acima;

function verificaForcaSenha() 
{
	var numeros = /([0-9])/;
	var alfabeto = /([a-zA-Z])/;
	var chEspeciais = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;

	if($('#password').val().length<6) 
	{
		$('#password-status').html("<span style='color:red'>Fraco, insira no mínimo 6 caracteres</span>");
	} else {  	
		if($('#password').val().match(numeros) && $('#password').val().match(alfabeto) && $('#password').val().match(chEspeciais))
		{            
			$('#password-status').html("<span style='color:green'><b>Forte</b></span>");
		} else {
			$('#password-status').html("<span style='color:orange'>Médio, insira um caracter especial</span>");
		}
	}
}

Aplicando o código

Como você pode perceber o código acima manipula dois elementos, identificados por #password e #password-status, aonde #password é o input na qual a senha é digitada e #password-status é aonde o resultado da verificação da força será exibida.

Obviamente você poderá mudar o nome destes identificadores, mas se optar por mante-los você precisa agora apenas acrescentar um input e um span ou div no seu formulário.

Observando também que temos a dependência do jQuery, então o código completo ficaria assim;

<label>Senha:</label>
<input type="password" id="password" minlength="6" maxlength="12" onKeyUp="verificaForcaSenha();" />
<span id="password-status"></span>
  
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous">
</script>
  
<script>
function verificaForcaSenha() 
{
	var numeros = /([0-9])/;
	var alfabeto = /([a-zA-Z])/;
	var chEspeciais = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;

	if($('#password').val().length<6) 
	{
		$('#password-status').html("<span style='color:red'>Fraco, insira no mínimo 6 caracteres</span>");
	} else {  	
		if($('#password').val().match(numeros) && $('#password').val().match(alfabeto) && $('#password').val().match(chEspeciais))
		{            
			$('#password-status').html("<span style='color:green'><b>Forte</b></span>");
		} else {
			$('#password-status').html("<span style='color:orange'>Médio, insira um caracter especial</span>");
		}
	}
}
</script>

Exigindo senhas ainda mais fortes

Se você quiser exigir senhas ainda mais fortes a dica é separar a cadeia de caracteres de letras maiúsculas e minúsculas, desta forma você criará uma regra a mais para definir senhas fortes.

<script>
function verificaForcaSenha2() 
{
	var numeros = /([0-9])/;
	var alfabetoa = /([a-z])/;
	var alfabetoA = /([A-Z])/;
	var chEspeciais = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;


	if($('#password').val().length<6) 
	{
		$('#password-status').html("<span style='color:red'>Fraco, insira no mínimo 6 caracteres</span>");
	} else {  	
		if($('#password').val().match(numeros) && $('#password').val().match(alfabetoa) && $('#password').val().match(alfabetoA) && $('#password').val().match(chEspeciais))
		{            
			$('#password-status').html("<span style='color:green'><b>Forte</b></span>");
		} else {
			$('#password-status').html("<span style='color:orange'>Médio</span>");
		}
	}
}
</script>

Gerador de senhas

Você já conhece o gerador de senhas do Blogson? Em breve farei um artigo explicando o código. Além de medir a força da senha você poderá também criar um formulário com sugestões de senhas.

Se este artigo foi útil, por favor deixe um comentário. Até +.