23.control_password_js.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Control Password JavaScript</title>
</head>
<body>
	<h1>Control Password JavaScript</h1>

	<p>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 carácter variará dependiendo del user agent y del OS.</p>

	<p>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</p>

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

	<script>

		function verificarPassword () {

			var pass = document.getElementById('password').value;

			if (pass.length < 5){

				alert('El password es muy corto');

			}else{

				alert('Longitud del password correcta');
			}
		}
		
	</script>

	<form action="">
		<label for="">Password: </label>
		<input type="password" id="password">
		<br>
		<input type="button" value="Enviar" onclick="verificarPassword()">


	</form>
	
	<p>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: </p>

   	<p><strong>var clave=document.getElementById('clave').value;</strong></p>
	
	<p>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) </p>

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

    <p>if (clave.length<5)</p>


</body>
</html>