Validar password con JavaScript

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

Introduzca la contraseña:

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.

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.

var p1 = document.getElementById("passwd").value;
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.

var espacios = false;
var cont = 0;

while (!espacios && (cont < p1.length)) {
  if (p1.charAt(cont) == " ")
    espacios = true;
  cont++;
}
   
if (espacios) {
  alert ("La contraseña no puede contener espacios en blanco");
  return false;
}

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

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

Que ambas contraseñas coincidan

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

if (p1 != p2) {
  alert("Las passwords deben de coincidir");
  return false;
} else {
  alert("Todo esta correcto");
  return true; 
}

Ahora, ¿Te atreves a realizarlo con patrones?

Twittear

Compartir20

20 Compartir

Vídeos sobre Javascript

11 comentarios en “Validar password con JavaScript”

susana madre

marzo 13, 2014 - 4:13 pm

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

Responder

Leo

diciembre 16, 2012 - 6:34 pm

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?

Responder

Víctor Cuervo

marzo 9, 2012 - 1:53 am

@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. :-D

Responder

laura

marzo 7, 2012 - 9:49 pm

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

Responder

Víctor Cuervo

diciembre 26, 2011 - 12:51 pm

@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>

Responder

Juan

diciembre 22, 2011 - 5:03 am

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 [email protected]

Responder

lineadecodigo

noviembre 11, 2010 - 3:45 pm

@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;

Responder

gregorioR

noviembre 10, 2010 - 8:30 pm

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

Responder

lineadecodigo

octubre 23, 2010 - 10:53 am

@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

Responder

melissa

septiembre 21, 2010 - 7:16 pm

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

Responder

Jose Luis

septiembre 16, 2009 - 3:25 pm

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.

Responder

¿Algo que nos quieras comentar? Cancelar la respuesta

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

Nombre *

Email *

Sitio Web

Línea de Código
Aprende a Programar