Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mruoppolo

Validação de Senha

Por , em Javascript

Recommended Posts

mruoppolo    14

mruoppolo
Postado

Olá, tudo bem??

 

Eu precisava conseguir criar um sistema para validar senha que me permita mostrar a força da senha e quando o cliente repetir a senha no próximo campo caso a senha seja diferente ou muito fraca ele não permite que o usuário dê um submit no formulário.

 

Como posso fazer isso??

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Basicamente com algumas Expressões Regulares.

 

Já existem plugins prontos disso para os principais frameworks e libs, como jQuery e Angular.

você quer implementar um do zero? ou um pronto te atende?

 

Se um pronto atender, só pesquisar por password strength que você acha várias opções.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mruoppolo    14

mruoppolo
Postado

Então, eu pesquisei isso mais cedo, achei alguns plugins, na verdade estes prontos já servem, o problema é que nenhum dos que eu testei funcionou, fora que eles apenas verificam a força da senha, não verificam se a senha digitada no campo 1 é igual a do campo 2 e também não impedem o usuário de dar um submit no formulário, por isso eu buscava uma solução que fizesse estas 3 coisas

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, Marcello.

 

Fiz um código bem feio de exemplo só por diversão. :-)

Espero que te ajude.

 

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Secure Password</title>

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/block/form.css">
</head>
<body>
  <h1>Sign Up</h1>

  <form action="" class="form">
    <label for="email" class="form-label">Email</label>
    <input id="email" class="form-input" name="email" type="text" placeholder="e.g., marco.bruno.br@gmail.com">

    <label for="password" class="form-label">Password</label>
    <input id="password" class="form-input" name="password" type="text" placeholder="e.g., ********">

    <progress id="progress" class="form-progress" value="0" max="100">0%</progress>

    <label for="rePassword" class="form-label">Re-password</label>
    <input id="rePassword" class="form-input" name="rePassword" type="text" placeholder="e.g., ********">

    <input class="form-button" type="sumbit" value="Register">
  </form>

  <script src="js/block/form.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  padding-top: 1em;
  font-size: 2.5em;
  text-align: center;
}

input {
  font-size: inherit;
  font-family: inherit;
  color: #333;
}

CSS (base.css)

.msgError {
  color: #F42C2C;
  font-size: .8em;
  display: block;
  margin-top: .2em;
}

CSS (form.css)

.form {
  background-color: #28324E;
  width: 40%;
  padding: 5%;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
  text-align: center;
  color: #FFF;
  position: relative;
}
.form-label {
  display: block;
  margin-top: .8em;
  margin-bottom: .4em;
}
.form-input {
  display: block;

  width: 80%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  margin-left: auto;
  margin-right: auto;
  height: 1.5em;
  outline: 1px solid #2969B0;

  transition: outline .2s linear;
}
.form-input.error {
  outline-color: #F42C2C;
  outline-width: 4px;
}
.form-input:focus {
  outline-width: 4px;
}
.form-progress {
  margin-top: 5px;
  height: 5px;
  width: 66.4%;
  position: absolute;
  left: 16.8%;
}
.form-progress::-moz-progress-bar {
  background-color: #41A85F;
}

.form-button {
  display: inline-block;
  margin-top: 1em;
  padding: .5em 2% ;
  background-color: #41A85F;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
  text-align: center;

  transition: background-color .2s linear;
}
.form-button:hover,
.form-button:focus {
  background-color: #3B9354;
}

JavaScript (form.js)

(function () {
  'use strict';

  var $form = document.querySelector('.form');
  var $password = document.querySelector('#password');
  var $labelRePassword = document.querySelector('[for=rePassword]');
  var $rePassword = document.querySelector('#rePassword');
  var $formButton = document.querySelector('.form-button');
  var $formProgress = document.querySelector('.form-progress');
  var textContentPassword = '';
  var textContentRePassword = '';

  $password.addEventListener('blur', function (event) {
    var $this = this;

    textContentPassword = $this.value;

    if (textContentPassword == '' && !document.querySelector('[data-error=passwordClear]')) {
      var $error = document.createElement('span');

      $error.classList.add('msgError');
      $error.setAttribute('data-error', 'passwordClear');
      $error.textContent = 'Please, fill the password';
      $form.insertBefore($error, $labelRePassword);

      $this.classList.add('error');
    };
  });

  $password.addEventListener('keyup', function (event) {
    var $this = this;
    var $errorPasswordClear = document.querySelector('[data-error=passwordClear]');
    var $errorNoMatch = document.querySelector('[data-error=notMatch]');
    var $minEightLetters = /[a-zA-Z0-9]{8,}/;
    textContentPassword = $this.value;
    textContentRePassword = $rePassword.value;

    if ($this.value != '' && $errorPasswordClear) {
      document.querySelector('[data-error=passwordClear]').remove();
      $this.classList.remove('error');
    } else if (textContentPassword == textContentRePassword && $errorNoMatch) {
      document.querySelector('[data-error=notMatch]').remove();
    };

    if ($minEightLetters.test(textContentPassword)) {
      $formProgress.value = 10;
      $formProgress.textContent = 10;
    } else {
      $formProgress.value = 0;
      $formProgress.textContent = 0;
    };
  });


  $rePassword.addEventListener('blur', function () {
    var $this = this;
    textContentRePassword = $this.value;

    if (textContentRePassword == '' && !document.querySelector('[data-error=rePasswordClear]')) {
      var $error = document.createElement('span');

      $error.classList.add('msgError');
      $error.setAttribute('data-error', 'rePasswordClear');
      $error.textContent = 'Please, fill the Re-password';
      $form.insertBefore($error, $formButton);

      $this.classList.add('error');
    } else if (textContentPassword != textContentRePassword && !document.querySelector('[data-error=notMatch]')) {
      var $error = document.createElement('span');

      $error.classList.add('msgError');
      $error.setAttribute('data-error', 'notMatch');
      $error.textContent = 'Password and Re-password does not match';
      $form.insertBefore($error, $formButton);

      $this.classList.add('error');
    };

    $rePassword.addEventListener('keyup', function (event) {
      var $this = this;
      var $errorPasswordClear = document.querySelector('[data-error=rePasswordClear]');
      var $errorNoMatch = document.querySelector('[data-error=notMatch]');
      textContentPassword = $password.value;
      textContentRePassword = $this.value;

      if ($this.value != '' && $errorPasswordClear) {
        document.querySelector('[data-error=rePasswordClear]').remove();
        $this.classList.remove('error');
      } else if (textContentPassword == textContentRePassword && $errorNoMatch) {
        document.querySelector('[data-error=notMatch]').remove();
      };
    });
  });
})();

Vê o que bom pra você utilizar e dá uma melhorada no código :-)

Qualquer dúvida só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito