Validando Contraseña de Usuario en Javascript

Validando Contraseña de Usuario en Javascript

En este tutorial crearemos un Validador de contraseña de usuario usando JavaScript. Este código validará automáticamente la entrada de la contraseña cuando el usuario ingrese algún valor en el cuadro de texto. El código en sí usa onkeyup () para llamar a una función que validará la contraseña si es aceptable para usarse en cualquier término. Este código es de uso gratuito, puede modificarlo como propio.

Utilizaremos JavaScript como lenguaje de script del lado del servidor porque permite un mayor control del comportamiento de su página web que HTML solo. Está incrustado en HTML que se encarga de permitir al usuario interactuar con la computadora.

Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.

La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
    </div>
  </nav>
  <div class="col-md-3"></div>
  <div class="col-md-6 well">
    <h3 class="text-primary">Validando Contraseña de Usuario en Javascript</h3>
    <hr style="border-top:1px dotted #ccc;"/>
    <div class="col-md-5">
      <form>
        <div class="form-group">
          <label>Ingrese una Contraseña</label>
          <input type="password" onkeyup="CheckPassword(this);" class="form-control"/>
        </div>
        <span id="chk_capital" class="alert-danger">X Una mayúscula en primera letra</span>
        <br />
        <span id="chk_number" class="alert-danger">X Tener un número numérico</span>
        <br />
        <br />
        
        <center><button type="button" id="btn_check" class="btn btn-primary" disabled="disabled">Validar</button></center>
        
      </form>
    </div>
  </div>
</body>
<script src="js/script.js"></script>
</html>

Crear el script:
Este código contiene el script de la aplicación. Este código validará automáticamente las entradas del formulario cuando se ingresen las entradas. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.

function CheckPassword(password){
  var chk_capital = document.getElementById('chk_capital');
  var chk_number = document.getElementById('chk_number');
  var bool_capital;
  var bool_number;
    
  if(password.value.search(/[0-9]/) > 0){
    chk_number.removeAttribute('class');
    chk_number.setAttribute('class', 'alert-success');
    chk_number.innerHTML = "&#10004; Validado";
    bool_number = true;
  }else{
    chk_number.removeAttribute('class');
    chk_number.setAttribute('class', 'alert-danger');
    chk_number.innerHTML = "X Tener un número numérico";
    bool_number = false;
  }
  
  if(password.value.match(/[A-Z]/)){
    chk_capital.removeAttribute('class');
    chk_capital.setAttribute('class', 'alert-success');
    chk_capital.innerHTML = "&#10004; Validado";
    bool_capital = true;
  }else{
    chk_capital.removeAttribute('class');
    chk_capital.setAttribute('class', 'alert-danger');
    chk_capital.innerHTML = "X Una mayúscula en primera letra";
    bool_capital = false;
  }
  
  if(bool_capital && bool_number){
    document.getElementById('btn_check').removeAttribute('disabled');
  }else{
    document.getElementById('btn_check').setAttribute('disabled', 'disabled');
  }
  
}

Ahí lo tienes, creamos un Validador Contraseña de Usuario usando JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.

Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:

SUSCRIBETE AL CANAL DE YOUTUBE AQUI !

Validando Contraseña de Usuario en Javascript – Descargar el Tutorial en el siguiente enlace:

DESCARGAR AQUÍ

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *