Comprobar si las claves son iguales

  • Por
En un formulario donde se han escrito dos claves, explicamos como comprobar, utilizando Javascript, que son iguales antes de mandarlas al servidor.
En un formulario de registro de usuarios es muy habitual que deseemos incluir un campo clave, que podría utilizarlo el usuario para acceder a los servicios de la web donde se está registrando o para actualizar más adelante la información introducida.

Para realizar un formulario donde se escriba la clave, lo normal es que aparezcan dos campos donde introducir la misma clave y que el usuario que la introduzca esté forzado a escribir la clave dos veces, siendo las dos claves introducidas iguales. Esto nos ayuda a que el usuario no se equivoque al escribir la clave por un fallo en la mecanografía, ya que es complicado que se equivoque dos veces en al escribir la clave.

Con Javascript podemos hacer una comprobación -en el cliente- para ver si se ha introducido la misma clave en los dos campos y, si es así, mandar el formulario al servidor o hacer aquellas acciones necesarias para continuar con el registro de ese visitante. En caso de que las dos claves sean distintas se debería informar al usuario de la situación para que vuelva a introducir la clave deseada correctamente.

Comprobar si dos campos de formulario son iguales

Es una acción bastante sencilla. Simplemente debemos extraer los dos valores guardados en los campos del formulario donde se ha escrito la clave y la repetición de la clave.

Luego, con un enunciado if, podemos comprobar si estos dos datos son el mismo o no lo son y hacer las sentencias necesarias en cada caso.

La función podría tener una forma como esta:

function comprobarClave(){
    clave1 = document.f1.clave1.value
    clave2 = document.f1.clave2.value

    if (clave1 == clave2)
       alert("Las dos claves son iguales...\nRealizaríamos las acciones del caso positivo")
    else
       alert("Las dos claves son distintas...\nRealizaríamos las acciones del caso negativo")
}


Nota: si deseamos mandar el formulario al servidor después de haber visto que las dos claves son iguales, es decir, si después de la comprobación queremos submitir el formulario, podríamos ejecutar el método submit() del objeto form.

document.f1.submit()


Nótese que el formulario donde estamos accediendo por la jerarquía de objetos del navegador se llama "f1". Eso quiere decir que la etiqueta <FORM> del formulario donde están los dos campos tiene el atributo name="f1". Si nuestro formulario se llama de otra manera habría que cambiar las líneas donde se accede a los dos campos de la clave, sustituyendo "f1" por el nombre de nuestro formulario. Del mismo modo, los dos campos donde se escriben las claves en nuestro ejemplo se supone que se llaman "clave1" y "clave2", si no es así, también habría que cambiar ese nombre por el que toque.

Para verlo más claro, aquí tenemos el código del formulario donde se encuentran los campos y sus nombres.

<form action="" name="f1">
Contraseña: <input type="password" name="clave1" size="20">
<br>
Repite contraseña: <input type="password" name="clave2" size="20">
<br>
<input type="button" value="Comprobar si son iguales" onClick="comprobarClave()">
</form>


Conclusión

Dada su sencillez, no debería suponer mucho problema este ejemplo. Nos quedaría ver el código del ejemplo completo y, si lo deseamos, acceder a una página donde se muestra el ejercicio en marcha.

<html>
<head>
<title>Validar si la contraseña y la repetición de la contraseña son iguales</title>
<script>
function comprobarClave(){
    clave1 = document.f1.clave1.value
    clave2 = document.f1.clave2.value

    if (clave1 == clave2)
       alert("Las dos claves son iguales...\nRealizaríamos las acciones del caso positivo")
    else
       alert("Las dos claves son distintas...\nRealizaríamos las acciones del caso negativo")
}
</script>
</head>

<body>

<h1>Validar si la contraseña y la repetición de la contraseña son iguales</h1>
<br>
Escribe una supuesta contraseña dos veces, una en cada campo, y pulsa el botón. Javascript te dirá si las dos son iguales.

<br>
<form action="" name="f1">
Contraseña: <input type="password" name="clave1" size="20">
<br>
Repite contraseña: <input type="password" name="clave2" size="20">
<br>
<input type="button" value="Comprobar si son iguales" onClick="comprobarClave()">

</form>

</body>
</html>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Lupicius

17/4/2010
Me lio
Ya hago lo que me dices... y todo parece que va bien, lo he integrado en un formulario de un blog que tengo... pero ahora me gustaria saber... que hago para que si clave1 y clave2 no son iguales que no envie el formulario.

Entiendes lo que te quiero decir?

Espero pronto tu respuesta, un saludo

fred_guillen

09/5/2010
Buen script
Gracias, funciona bien.

CRISTIAN

27/8/2011
Recomiendo este codigo
http://code.google.com/p/lineadecodigo/source/browse/trunk/lineadecodigo_web/WebContent/markup/HTML/formularios/validar-password.html

Diego Armoa

04/6/2014
Igual deja pasar al action del form
compara muy bien las claves pero si no son iguales igual deja pasar de pagina, alguna solucion ?
pense que con el return false; funcionaria