A outra resposta explicou o problema de usar apenas length
para comparar as senhas, mas gostaria de sugerir mais alguns detalhes.
Os if
's para testar as várias condições da senha podem ser melhorados. Eu faria algo assim:
if (form.senha.value == "") {
// erro
return false;
}
if (form.senha.value.length < 3) {
// senha fraca
return false;
}
if (form.senha.value.length < 5) {
// senha média
return false;
}
Primeiro eu testo se é vazia (e se for, a função já retorna false
e portanto nem chega a testar as demais condições).
Se a senha não for vazia, quer dizer que com certeza seu length
é maior que zero, então eu não preciso testar essa condição novamente no segundo if
. Só preciso testar se é menor que 3.
Se o tamanho da senha for maior ou igual a 3, ele não entra no primeiro e nem no segundo if
. Então se chegou no terceiro if
é porque com certeza o tamanho é >= 3 e eu não preciso testar de novo essa condição (só preciso ver se é menor que 5).
Além de ficar mais sucinto e evitar comparações desnecessárias, isso também facilita a manutenção. Se as faixas de valores mudarem (por exemplo, senha fraca é aquela com até 4 caracteres em vez de 3), você só precisa mudar uma vez - do jeito que estava antes, precisaria mudar em mais de um lugar.
Mas ainda tem um detalhe que ficou estranho. Se o tamanho for 5 ou 6, ele não entra em nenhum dos if
's (a senha não é considerada fraca, nem média, nem forte). É isso mesmo?
E se o tamanho for maior que 6, a senha é forte, mas ele retorna false
também (senhas fortes são inválidas? Muito estranho).
Enfim, eu modifiquei um pouco as condições para considerar que senhas com tamanho entre 3 e 5 são médias e inválidas, e de 6 pra cima são fortes e válidas:
function validar() {
// campo nome
if (form.nome.value == "") {
document.getElementById("erro").innerHTML = "Por favor, preencha o campo nome.";
document.getElementById("erro").style.color = "red";
return false;
}
// não precisa buscar esse elemento toda hora, busque uma vez só e pronto
var erro = document.getElementById('errosenha');
// campo senha
if (form.senha.value == "") {
erro.innerHTML = "Por favor, preencha o campo senha.";
erro.style.color = "red";
return false;
}
if (form.senha.value.length < 3) {
erro.innerHTML = "senha fraca";
erro.style.color = "red";
return false;
}
// mudar < para <=
if (form.senha.value.length <= 5) {
erro.innerHTML = "senha média";
erro.style.color = "orange";
return false;
}
// se chegou aqui é porque não entrou em nenhum dos if's acima, ou seja
// neste ponto a senha com certeza tem 6 ou mais caracteres
erro.innerHTML = "senha forte";
erro.style.color = "green";
// não retorno false porque senhas fortes são válidas
//campo confirmação
if (form.senha.value != form.senha2.value) {
var erro2 = document.getElementById('confirm');
erro2.innerHTML = "Por favor confirme sua senha corretamente.";
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<form name="form" onsubmit="return validar()" action="entrou.html">
Nome: <input type="text" name="nome"> <span id="erro" ></span> <br><br>
Senha: <input type="password" name="senha"> <span id="errosenha"></span> <br><br>
Confirmar senha: <input type="password" name="senha2"> <span id="confirm"></span> <br> <br>
<input type="submit" value="enviar" >
</form>
</body>
</html>