Validar password con JavaScript

Este ejercicio consiste en comprobar, de una forma sencilla, que la contrasea introducida en un formulario, dentro de dos campos distintos, cumple una serie de restricciones:
o Ambas contraseas debern de coincidir. o No se podr dejar ningn campo de los dos vacos. o La cadena no podr contener espacios en blanco .

Lo primero que haremos a la hora de crear el formulario ser indicar que los campos de entrada deben de serINPUT del tipo password
<label for="passwd">Introduzca la contrasea:</label> <input type="password" id="passwd" size="20"><br />

Con lo que respecta a la validacin, se debe de hacer en cuanto el usuario quiera enviar el formulario. Es decir, deberemos de detectar el evento onSubmit. Dentro de este evento ejecutaremos la funcin de validacin, dicha funcin retornar verdadero si se cumplen todos los requisitos, sino se retornar falso.
<form name="form1" method="POST" onSubmit="return validarPasswd()" action="enviar.php">

Ahora empezaremos a codificar la funcin Javascript que realice la validacin. En este caso es la funcin "validarPasswd", la cual llamamos desde el onSubmit. Hay que decir que tenemos diferentes formas de realizar esta validacin. La ms rpida sera con el uso de patrones. Pero en nuestro caso y orientndolo a un desarrollo muy bsico vamos a realizarlo con estructuras bsicas del lenguaje. Para acceder al valor de los campos vamos a utilizar la funcin .getElementById. Esta funcin recibe como parmetro el ID que le hayamos dado a los campos INPUT del formulario. Es por ello que deberemos de revisar el valor de los atributos ID.

1. var p1 = document.getElementById("passwd").value; 2. var p2 = document.getElementById("passwd2").value;

Ahora pasaremos a realizar las diferentes validaciones

Que no haya espacios en blanco

Recorremos la cadena mediante un bucle iterativo y con una variable de guarda. En el caso de que encontremos un carcter en blanco, cambiamos el valor de la variable de guarda.

1. var espacios = false; 2. var cont = 0;

3. 4. while (!espacios && (cont < p1.length)) {

5. 6. 7.
9.

if (p1.charAt(cont) == " ") espacios = true; cont++;

8. }

10. if (espacios) { 11. alert ("La contrasea no puede contener espacios en blanco"); 12. return false;
13. }

Que no nos hayan dejado un campo vaco

Para ello comprobaremos que el tamao es mayor de 0. El tamao de una cadena lo conseguimos con el atributo .length

1. if (p1.length == 0 || p2.length == 0) { 2. alert("Los campos de la password no pueden quedar vacios"); 3. return false;
4. }

Que ambas contraseas coincidan

En este caso comprobaremos que el contenido de las variables es el mismo:

1. if (p1 != p2) { 2. alert("Las passwords deben de coincidir"); 3. return false; 4. } else { 5. alert("Todo esta correcto"); 6. return true;
7. }