Novedades ES6

Control Password con Javascript

Los elementos <input> de tipo 'password' proporcionan una forma para que el usuario ingrese una contraseña de forma segura. El elemento se presenta como un control de editor de texto, sin formato, de una línea, en el que el texto está oculto para que no pueda leerse, generalmente reemplazando cada carácter con un símbolo como el asterisco ('*') o un punto ('•'). 

Este control HTML es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos.

La mayoría de las veces este dato se procesa en el servidor, pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo.

Ejemplo: Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>
<script>
  function verificar()
  {
    var clave=document.getElementById('clave').value;
    if (clave.length<5)
    {
      alert('La clave no puede tener menos de 5 caracteres!!!');
    }
    else
    {
     myForm.submit();
    }
  }
</script>

<form name="myForm" action="action_page.php" method="post">
 Ingrese una clave:
  <input type="password" id="clave" name="fname">
  <br>
  <input type="button" value="Confirmar" onClick="verificar()">
</form>
</body>
</html>


En este problema debemos observar que cuando ingresamos caracteres dentro del campo de edición sólo vemos asteriscos, pero realmente en memoria se almacenan los caracteres tipeados. Si queremos mostrar los caracteres ingresados debemos acceder mediante el método getElementById a la marca HTML clave:

var clave=document.getElementById('clave').value;

Normalmente, a este valor no lo mostraremos dentro de la página, sino se perdería el objetivo de este control (ocultar los caracteres tipeados).

Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres.

if (clave.length<5)
{
alert('La clave no puede tener menos de 5 caracteres!!!');
}
else
{
myForm.submit();
}