Validar password con JavaScript

01/Sep/2009 JavaScript , , , 11 Comentarios

Este ejercicio consiste en comprobar, de una forma sencilla, que la contraseña introducida en un formulario, dentro de dos campos distintos, cumple una serie de restricciones:

  • Ambas contraseñas deberán de coincidir.
  • No se podrá dejar ningún campo de los dos vacíos.
  • 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 ser INPUT del tipo password

  1. <label for="passwd">Introduzca la contraseña:</label>
  2. <input type="password" id="passwd" size="20"><br />

Con lo que respecta a la validación, 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 función de validación, dicha función retornará verdadero si se cumplen todos los requisitos, sino se retornará falso.

  1. <form name="form1" method="POST" onSubmit="return validarPasswd()" action="enviar.php">

Ahora empezaremos a codificar la función Javascript que realice la validación. En este caso es la función "validarPasswd", la cual llamamos desde el onSubmit.

Hay que decir que tenemos diferentes formas de realizar esta validación. La más rápida sería con el uso de patrones. Pero en nuestro caso y orientándolo a un desarrollo muy básico vamos a realizarlo con estructuras básicas del lenguaje.

Para acceder al valor de los campos vamos a utilizar la función .getElementById. Esta función recibe como parámetro 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 carácter 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. if (p1.charAt(cont) == " ")
  6. espacios = true;
  7. cont++;
  8. }
  9.  
  10. if (espacios) {
  11. alert ("La contraseña no puede contener espacios en blanco");
  12. return false;
  13. }

Que no nos hayan dejado un campo vacío

Para ello comprobaremos que el tamaño es mayor de 0. El tamaño 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 contraseñas 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. }

Ahora, ¿Te atreves a realizarlo con patrones?

Vídeos sobre Javascript


11 comentarios en “Validar password con JavaScript”

Víctor Cuervo

susana madre

no sirve para un carajo su puta pagina.!!!!!

Víctor Cuervo

Leo

Muchas gracias por el codigo! solo tengo una pregunta, el codigo este comprueba si dos passwords concuerdan, como podria hacer para el formulario no efectue su “action” cuando la contraseña es incorrecta?

Víctor Cuervo

Víctor Cuervo

@laura,

Iría en la página que pidieses la contraseña. Pero ten en cuenta que esto solo compara datos, luego en tu código PHP tienes que realizar el proceso de autentificación del usuario. 😀

Víctor Cuervo

laura

Todo ese codigo va en una sola hoja de php? o casa pedaso va en una diferente

Víctor Cuervo

Víctor Cuervo

@Juan,

Tienes que meter el código en un fichero con extensión .js y luego incluirlo en tu web con la siguiente línea:

<script type='text/javascript' src='miscripts.js'></script>
Víctor Cuervo

Juan

Me sirivio de muxo gracias men!! estoy haciendo una Web en JSP y si me sirvio!! bueno men una consulta si kiero hacer una pagina donde esten todos mis javascripts y de mi una pagina externa llamarlo como lo hago? Graciass mi correo esta ahi eduardo_281990@hotmail.com

Víctor Cuervo

lineadecodigo

@gregorioR,

Para validar una contraseña puesta por ti habría que añadir otro if que comprobase que el valor de uno de los campos (ya habría comprobado que son iguales) coincide con el valor de tu contraseña.

Algo así como:

if (p1 == “contrasena”)
return true;
else
return false;

Víctor Cuervo

gregorioR

hola que tal quiero aportar que el codigo si fucniona y es bueno solo que en donde le pongo mi propia contraseña…

Víctor Cuervo

lineadecodigo

@melissa,

Te recomiendo que incorpores la duda en nuestros foros. Para temas en ASP utiliza el foro
http://www.dudasprogramacion.com/forum/active-server-pages-asp

Víctor Cuervo

melissa

tengo un problema urge,,, respuesta!….

window.alert(“Cargando Datos”)

<%
Dim oConn
Dim rs
Dim SQL
Dim conn
dim sestado
dim total
dim suma

strconn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/base/fonaes.mdb")
set conn = Server.Createobject("ADODB.CONNECTION")
conn.open strconn
set rs =Server.CreateObject("ADODB.Recordset")

rs.CursorType=1

SQL = "select * from padronfinanciero2009 where idcaja = " & request.Form("idcaja") & " Order by caja;"
rs.Open SQL,conn

Do until rs.EOF

response.write(" Caja “)
response.write(“” &”” &””&””)

response.write(” “)

response.write(“Entidad Federativa”)
response.write(“”& “” &””)

response.write(” “)

rs.MoveNext

loop
rs.close

%>

Maneja Microbanker

Selecciona
SI
NO

Sistema que Maneja

 

Observaciones

 

 

 

 

bien hay 2 campos que son los que urgen, existe la seleccion si y no, y un campo abajo ese campo tiene que bloquearse cuando seleccion y si estan seleccionados y abrirse cuando este en no… la otra es si los campos no se llenaron mandar un mensaje de alerta

me pueden ayudar por favor gracias

Víctor Cuervo

Jose Luis

Gracias Amigo lo voy a provar.. recien empiezo con programacion en php y java stcript, esto me va a ayudar con mi pagina.. Gracias d nuevo.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*