formulario contraseña

dvd1975 · #1 (**permalink**) 22/12/2007, 12:25

hola estoy aprendiendo javascript pero tengo este ejercicios.
consiste en introducir una contraseña y luego validarla
1)si no son iguales dira que no son iguales
2) si introduces una campo en blanco te lo dira
3) no puede ser la contraseña espacios en blanco.

me funciona los dos primeros pasos puntos 1 y dos pero el tercer no me funciona he ido a firefox mozilla y en la consola donde puedes mirar errores no aparece ninguna pero no funciona

alguien me puede decir porque no funciona. se que se podria utilizar utilizando propiedades de cadena pero me gustaria saber porque falla mi ejerrcicio. gracias

<html>
<head>
<title>Ejercicio</title>
<script language="javascript">
function comprobar()
{
var contador=0;

if(document.formulario.elements[0].value!=document.formulario.elements[1].value)
{
alert("la contraseña es incorrecta");
if((document.formulario.elements[0].value =="")|| (document.formulario.elements[1].value==""))
alert("Tienes que rellenar los dos campos contraseña y nueva contraseña");
}
else
{
for(i=0;i<document.formulario.contraseña.length;i+ +)
{
if((document.formulario.contraseña[i].value==" ") ||(document.formulario.nueva[i].value==" "))
contador++;
}
if(contador==document.formulario.contraseña.length )
alert("La contraseña no puede ser una cadena vacia");
}
}
</script>
</head>

<body>
Introduce una contraseña<br><br>
<form name="formulario" onSubmit="comprobar()">
Contraseña <input type="password" size="20" name="contraseña" ></input><br><br>
Nueva contraseña <input type="password" size="20" name="nueva"></input><br>

<input type="submit" name="En" value="Enviar"></input>
</form>
</body>
</html>

derkenuke · #2 (**permalink**) 23/12/2007, 10:18

Hola dvd1975:

Como dices que estás empezando con javascript lo voy a plantear despacio para que no te pierdas. Tienes 3 condiciones a cumplir, luego en tu función para validar deberían distinguirse bien en un vistazo esas 3 condiciones:

Código PHP:

  if( condicion1 ) {

  //error1

}

else if( condicion2 ) {

  //error2

}

else if( condicion3 ) {

  //error3

}

else {

  //sin errores

}

También tienes que tener claro que tu función debe retornar siempre true o false, ya que en tu formulario escribirás onsubmit="return comprobar()", y si se envía o no dependerá de ese true o false.

Una vez buscada esta estructura, tenemos que empezar a buscar condición1, 2 y 3. Vamos una por una:

La primera ya la tienes, es fácil: campo1.value!==campo2.value
La segunda tampoco es complicada como has visto: campo1.value==="" || campo2.value===""
Para la tercera lo tenemos más complicado, porque como no sabemos cuántos espacios en blanco se van a introducir, no podemos hacer una comparación directa. Aquí hay muchas soluciones, te voy a proponer varias:
- Contar cuántos espacios en blanco tiene la contraseña. Si ese número es igual a la longitud del value significa que la contraseña son sólo espacios en blanco (creo que has intentado hacer eso).
- Eliminar los espacios en blanco de la contraseña. Si nos quedamos con una cadena vacía es que eran sólo espacios.
- Partir la cadena según los espacios (split()) y contar cuantas piezas tenemos. Si tenemos tantas piezas como caracteres entonces son todas espacios.
Habrán bastantes más... pero no quiero abrumarte con posibilidades. Tampoco quiero meterme con expresiones regulares si dices que estás empezando... Vamos a seguir tu método de contar espacios.
Para ello podemos ir caracter por caracter mirando si equivale a un espacio, y entonces aumentar la variable contador. Para un campo llamado campo se haría así:

Código PHP:

for(var i=0, l=campo.value.length; i<l; i++) { if( campo.value.charAt(i)===" " ) contador++; }

Partiendo la cadena por espacios resulta más directo:

Código PHP:

var contador = campo.value.split(" ").length-1;

Así que me voy a quedar con esta última forma.

Bueno, teniendo ya las tres condiciones, la construcción del script es algo trivial. Te paso el ejemplo completo (un poco modificado).

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

    <meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />

    <title>Ejercicio</title>

    <script type="text/javascript">

    <!--

 
    // Validador de un formulario

    function comprobar(fr) {

        var pass1 = fr.contrasena.value;                    // contraseña

        var pass2 = fr.nueva.value;                            // repetición de la contraseña

        var espacios1 = pass1.split(" ").length-1;            // número de espacios de la contraseña

        var espacios2 = pass2.split(" ").length-1;            // número de espacios de la repetición

        if( pass1 !== pass2 ) {                                                // si son diferentes

            alert("las contraseñas son diferentes");

            return false;

        }

        else if( pass1==="" || pass2==="" ) {                                // si alguna está vacía

            alert("Una o las dos contraseñas están vacías");

            return false;

        }

        else if( espacios1===pass1.length || espacios2===pass2.length ) {    // si alguna es sólo espacios en blanco

            alert("Una o las dos contraseñas están formadas únicamente por espacios en blanco");

            return false;

        }

        else {                                                                // ningún error

            alert("Todo va bien");    

            return true;

        }

    }

 
 
    // -->

    </script>

</head>

 
<body>

 
 
    <form name="formulario" onsubmit="return comprobar(this)" action="">

        <p>Introduce una contraseña</p>

        <label for="pass">Contraseña</label> <input type="password" id="pass" size="20" name="contrasena"/><br/>

        <label for="repass">Nueva contraseña</label> <input type="password" id="repass" size="20" name="nueva" /><br/>

        <input type="submit" name="En" value="Enviar" />

    </form>

 
 
</body>

</html>

Si tienes alguna duda no dudes en postearla.

Un saludo

hades87 · #3 (**permalink**) 23/12/2007, 10:21

yo estoy intrigado en saber qeu diferencia hay en emter x==1, o X===1, por ejemplo, pq se qeu = es asignar valor a variable, y == es ahcer comapracion, pero lso === nos e que son, me lo aclararias?^^

Gracias de antemano.

dvd1975 · #4 (**permalink**) 23/12/2007, 13:23

hola gracias hades he entendido tu respuesta y hecho este ejercicio utilizando char at pero me gustaria saber porque mi codigo
for(i=0;i<document.formulario.contraseña.length;i+ +)
{
if((document.formulario.contraseña[i].value==" ") ||(document.formulario.nueva[i].value==" "))
contador++;
}
if(contador==document.formulario.contraseña.length )
alert("La contraseña no puede ser una cadena vacia");
}
}
no funciona porque segun esta escrito deberia funcionar y como estoy aprendiendo me gustaria saber porque para no tener dudas.

tambien yo solamente estoy estudiando javascript no se si sera muy distinto a php.
gracias

derkenuke · #5 (**permalink**) 23/12/2007, 15:16

Hola hades87 y dvd1975.

Cita:

Iniciado por hades87

yo estoy intrigado en saber qeu diferencia hay en emter x==1, o X===1, por ejemplo, pq se qeu = es asignar valor a variable, y == es ahcer comapracion, pero lso === nos e que son, me lo aclararias?^^

Gracias de antemano.

No hay más que echar un vistazo a google: = es asignación, == es comparación simple y === es comparación, pero también ha de coincidir el tipo de variables comparadas. Es decir:
3 == "3" ==> true
3 === "3" ==> false
"3" === "3" ===> true

Cita:

Iniciado por dvd1975

hola gracias hades he entendido tu respuesta y hecho este ejercicio utilizando char at pero me gustaria saber porque mi codigo no funciona porque segun esta escrito deberia funcionar y como estoy aprendiendo me gustaria saber porque para no tener dudas.

Es bueno saber por qué un código falla

. En tu código no se cuentan los espacios: Si te fijas dentro del condicional hay escrito referencias que no existen: document.formulario.contraseña[i] no existe, ya que document.formulario.contraseña no es un array, sino una referencia a un campo. Para extraer un caracter de un value deberías haber escrito document.formulario.contraseña.value.charAt(x).
Además ahí estarías mirando a ver si todo el campo es equivalente a " ", y además muchas veces, aumentando en consecuencia contador. La verdad, no tiene mucho sentido

Un saludo.

hades87 · #6 (**permalink**) 23/12/2007, 16:53

muchas gracias por la aclaracion derkenuke, o sea los === te comparan sea tring o sea numero no? ahroa lo etneindo. y dvd1975, lo que te psue estaba mal, que aun no domino mucho javascript y me lio a aveces con php.

JS y PHP no son muy distintos en lo que a sintaxsis se refiere, pero JS trabaj desde el lado del usuario y php trabaja para el aldo del servidor.

dvd1975 · #7 (**permalink**) 06/01/2008, 13:09

yo sigo escribiendo

if((document.formulario.contraseña.value.charAt[i]==" ") || (document.formulario.nueva.value.charAt[i]==" "))
contador++;
}
if(contador==document.formulario.contraseña.length )
alert("La contraseña no puede ser una cadena vacia");

para que no pueda ser la contraseña una cadena de espacios en blanco y no funciona.
¿donde este el error?

esta escrito en javascript

por cierto en " " entre las comillas pongo un espacio