JavaScript: Verificar la longitud de una contraseña

Resuelto
Anonyme209 Mensajes publicados 761 Estado Miembro -  
Ysabe_l Mensajes publicados 11933 Fecha de registro   Estado Colaborador Última intervención   -
Hola,

Me gustaría que, cuando el usuario salga del campo de contraseña de mi formulario HTML, se verifique que la longitud de la contraseña sea suficiente.
Si no es así, se muestre un mensajito bastante discreto debajo del campo de la contraseña (no quiero un mensaje tipo alerta). Conozco muy poco de JavaScript, no sé cómo hacerlo.
Lo que he hecho por ahora:

<p style='width:300px;'>Contraseña : (Entre 8 y 255 caracteres) <input size='60px' type='password' name='mdp' onBlur='mdpchange()'></p>

Para el código JavaScript, no sé.

Gracias por vuestra ayuda.

10 respuestas

Ysabe_l Mensajes publicados 11933 Fecha de registro   Estado Colaborador Última intervención   277
 
Hola,

Olvidaste el ; al final de la primera línea.

var longueur = $_POST['mdp'].lenght;


Luego creas un párrafo o un span en el lugar donde quieres colocar el mensaje de error asignándole un id. No pongas nada dentro.

<p id="message"></p>


Verificas la longitud y si no es correcta escribes dentro del párrafo vacío. Por ejemplo si quieres un mínimo de 8 caracteres:

if(longueur < 8) { document.getElementById("message").innerHTML = "Attention le mot de passe n'est pas assez long, il doit faire 8 caractères minimum."; }
1
Usuario anónimo
 
Tu tua variable se llama longeur mientras que lo que te alerta se llama longueur, así que hay una u de más.

En cuanto al mensaje corto, realmente no tengo los conocimientos necesarios para hacerlo.
0
Anonyme209 Mensajes publicados 761 Estado Miembro 19
 
Hola,
no está mejor con
var longueur = document.getElementsByName("mdp").lenght alert(longueur);

Un mensaje se muestra bien, pero está escrito "Undefined" (indefinido), en lugar de la longitud de la contraseña.
0
Usuario anónimo
 
length está mal escrito, escribiste lenght
0
Usuario anónimo
 
La erreur vient de moi qui me suis trompé sur l’écriture au départ, excuse-moi.
0
Anonyme209 Mensajes publicados 761 Estado Miembro 19
 
Hola,

la longitud es igual a 1 independientemente de la longitud de la contraseña...
De lo contrario, para el mensaje, funciona perfectamente.
0
Ysabe_l Mensajes publicados 11933 Fecha de registro   Estado Colaborador Última intervención   277
 
Ah, pero qué tonta soy!

Acabo de entender, lanzas la función en cuanto el usuario hace clic fuera del campo de la contraseña, así que no puedes recuperar lo que está en el campo con $_POST[''] porque no se envía, de hecho además no podrías porque JavaScript no puede acceder a las variables globales.

Entonces en tu función debes “leer” el contenido del input; para eso le vas a dar un ID: (recoloco el código con las etiquetas de estilo en el HTML como tú pero no debes hacer eso, usa el CSS para separar el fondo de la forma).

<p style='width:300px;'>Mot de passe : (Entre 8 et 255 caractères) <input size='60px' type='password' name='mdp' id='mdp' onBlur='mdpchange()'></p> <p id="message"></p>


Et dans la fonction JavaScript :

function mdpchange() { var mdp = document.getElementById("mdp").value; // tu récupères la valeur du mdp var longueur = mdp.lenght; // tu récupères la longueur // si la longueur n'est pas bonne tu affiches le message if(longueur < 8 || longueur > 255) { document.getElementById("message").innerHTML = "Attention le mot de passe n'est pas assez long, il doit faire 8 caractères minimum."; } }
0
Pitet Mensajes publicados 2845 Estado Miembro 530
 
Hola,

También puedes usar la validación html5 (sin ningún código javascript) que ya es compatible con todos los navegadores modernos.

El atributo pattern permite entre otras cosas definir un número mínimo y máximo de caracteres para un input:
 <input type="password" pattern=".{5,10}" required title="5 a 10 caracteres"> 


Que tengas un buen día
0
Ysabe_l Mensajes publicados 11933 Fecha de registro   Estado Colaborador Última intervención   277
 
Ciertamente, pero hay que hacer la verificación también para los navegadores más antiguos que desafortunadamente todavía se usan, y como él quería que el mensaje se mostrara justo al terminar la escritura y no al validar.
0
Anonyme209 Mensajes publicados 761 Estado Miembro 19
 
Primero, no sé por qué escribes todos length con ght al final.
Luego, gracias, funciona perfectamente.
Pongo el tema como resuelto.
0
Ysabe_l Mensajes publicados 11933 Fecha de registro   Estado Colaborador Última intervención   277
 
Porque en francés no hay muchos th ni ht y escribo más a menudo “width”, y entonces mis dedos están más acostumbrados al “th” que al “ht”.

¡Pero genial si funciona!
0
Usuario anónimo
 
Puedes recuperar la longitud haciendo var longitud = $_POST['mdp'].lenght
-1
Anonyme209 Mensajes publicados 761 Estado Miembro 19
 
Hola,

var longeur = $_POST['mdp'].lenght alert(longueur);


o

var longeur = document.getElementsByName("mdp").lenght alert(longueur);


1. Nada sucede...
2. Eso no responde a mi segunda pregunta: mostrar un pequeño mensaje debajo del área de texto si la longitud no es suficiente.

Gracias por tu ayuda.
-1