Code de puissance de mot de passe

Version imprimable

Salut,
j'ai trouver ce code sur un site :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
<head>
<style type="text/css">
#weak, #medium
{
	border-right:solid 1px #DEDEDE;
}
 
#sm
{
	margin:0px;
	padding:0px;
	height:14px;
	font-family:Tahoma, Arial, sans-serif;
	font-size:9px;
}
 
#sm ul
{
	border:0px;
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:center;
}
 
#sm ul li
{
	display:block;
	float:left;
	text-align:center;
	padding:0px 0px 0px 0px;
	margin:0px;
	height:14px;
}
 
.nrm
{
	width:84px;
	color:#adadad;
	text-align:center;
	padding:2px;
	background-color:#F1F1F1;
	display:block;
	vertical-align:middle;
}
 
.red
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#FF6F6F;
	display:block;
	vertical-align:middle;
}
 
.yellow
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#FDB14D;
	display:block;
	vertical-align:middle;
}
 
.green
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#A0DA54;
	display:block;
	vertical-align:middle;
}
</style>
<script type="text/javascript">
function evalPwd(s)
{
	var cmpx = 0;
 
	if (s.length >= 6)
	{
		cmpx++;
 
		if (s.search("[A-Z]") != -1)
		{
			cmpx++;
		}
 
		if (s.search("[0-9]") != -1)
		{
			cmpx++;
		}
 
		if (s.length >= 8 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
		{
			cmpx++;
		}
	}
 
	if (cmpx == 0)
	{
		document.getElementById("weak").className = "nrm";
		document.getElementById("medium").className = "nrm";
		document.getElementById("strong").className = "nrm";
	}
	else if (cmpx == 1)
	{
		document.getElementById("weak").className = "red";
		document.getElementById("medium").className = "nrm";
		document.getElementById("strong").className = "nrm";
	}
	else if (cmpx == 2)
	{
		document.getElementById("weak").className = "yellow";
		document.getElementById("medium").className = "yellow";
		document.getElementById("strong").className = "nrm";
	}
	else
	{
		document.getElementById("weak").className = "green";
		document.getElementById("medium").className = "green";
		document.getElementById("strong").className = "green";
	}
}
</script>
</head>
 
<body>
<form>
<input type="text" size="24" onkeyup="evalPwd(this.value);" /><br />
<div id="sm">
<ul>
<li id="weak" class="nrm">Faible</li>
<li id="medium" class="nrm">Moyen</li>
<li id="strong" class="nrm">Fort</li>
</ul>
</div>
</form>
</body>

Le problème est que je ne voudrais pas mettre des mots tels que : Faible, moyen ou fort. Mais des images tel : pass0.jpg, pass1.jpg, pass2.jpg, pass3.jpg et pass4.jpg

Comment faire?

Merci

22/05/2007, 10h29
Ouach

Tu peux ajouter une balise IMG avec l'attribut id et l'attribut src à la place de chaque entrée li (Faible, Moyen et Fort). Ensuite dans ton script tu peux faire par exemple (je n'ai pas testé)

Code:

document.getElementById("idDeLImage").src="pass0.jpg";

C'est à dire réassigner une nouvelle image à ta balise.
22/05/2007, 10h29
SpaceFrog

mets les images dans les li ???

pas très orhtodoxe mais modification à moindre frais ...
22/05/2007, 10h37
kevinf

En fait, ce que je voudrais c'est que au départ, il n'y ai rien qui s'affiche.
Ensuite, au lieu que "faible" devienne rouge, et bien ce soit cette image qui apparaisse : pass0.jpg.
Et ensuite, l'image pass0.jpg disparrait et une autre apparait : pass1.jpg et ainsi de suite jusqu'a : pass4.jpg

Merci de votre aide.
22/05/2007, 10h42
SpaceFrog

au lieu de changer le color, tu changes le style.visibility ou le style.display
22/05/2007, 10h44
kevinf

Pourrait tu me montrer avec le code?

Merci d'avance de ton aide.
22/05/2007, 10h49
SpaceFrog
dix balles, un mars, le beurre l'argent du beurre et la main de la crèmière pour ne pas citer une autre partie plus charnue de son anatomie ????
Code:

1 2 3 4 5 6 7 if (cmpx == 0) { document.getElementById("weak").className = "nrm"; document.getElementById("medium").className = "nrm"; document.getElementById("strong").className = "nrm"; }
modifies les class

un class avec display:none
l'autre avec display:block
22/05/2007, 11h04
kevinf

Je suis vraiement désolé, mais le Javacript n'est pas trop mon fort, je suis plus vers le PHP.
22/05/2007, 11h10
SpaceFrog

javascript est bien plus simple que php et là en l'occurence c'est plus css qu'il faut connaitre ...
22/05/2007, 11h47
kevinf

J'ai essayé, sans succès...
22/05/2007, 11h49
SpaceFrog

montre nous ta tentative que l'on te dise ou tu te trompres et que tu apprenne de tes erreurs en comprenant tes erreurs ...

Ca ne donne rien :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<head>
<style type="text/css">
#weak, #medium
{
	border-right:solid 1px #DEDEDE;
}
 
#sm
{
	margin:0px;
	padding:0px;
	height:14px;
	font-family:Tahoma, Arial, sans-serif;
	font-size:9px;
}
 
#sm ul
{
	border:0px;
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:center;
}
 
#sm ul li
{
	display:block;
	float:left;
	text-align:center;
	padding:0px 0px 0px 0px;
	margin:0px;
	height:14px;
}
 
.nrm
{
	width:84px;
	color:#adadad;
	text-align:center;
	padding:2px;
	background-color:#F1F1F1;
	display:block;
	vertical-align:middle;
}
 
.red
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#FF6F6F;
	display:block;
	vertical-align:middle;
}
 
.yellow
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#FDB14D;
	display:block;
	vertical-align:middle;
}
 
.green
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#A0DA54;
	display:block;
	vertical-align:middle;
}
</style>
<script type="text/javascript">
function evalPwd(s)
{
	var cmpx = 0;
 
	if (s.length >= 1)
	{
		cmpx++;
 
		if (s.search("[A-Z]") != -1)
		{
			cmpx++;
		}
 
		if (s.search("[0-9]") != -1)
		{
			cmpx++;
		}
 
		if (s.length >= 15 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
		{
			cmpx++;
		}
	}
 
	if (cmpx == 0)
	{
 
	}
	else if (cmpx == 1)
	{
		document.getElementById("weak").src = "pass0.jpg";
		document.getElementById("medium").className = "nrm";
		document.getElementById("strong").className = "nrm";
	}
	else if (cmpx == 2)
	{
		document.getElementById("weak").className = "yellow";
		document.getElementById("medium").className = "yellow";
		document.getElementById("strong").className = "nrm";
	}
	else
	{
		document.getElementById("weak").className = "green";
		document.getElementById("medium").className = "green";
		document.getElementById("strong").className = "green";
	}
}
</script>
</head>
 
<body>
<form>
<input type="text" size="24" onkeyup="evalPwd(this.value);" /><br />
<div id="sm">
<ul>
<li id="weak"></li>
<li id="medium"></li>
<li id="strong"></li>
</ul>
</div>
</form>
</body>

22/05/2007, 12h18
SpaceFrog

et le display:none ?
22/05/2007, 12h21
kevinf

Mais je ne comprend pas, pour moi je ne devrais pas utiliser de CSS vu que c'est juste une succession d'images.
22/05/2007, 12h24
SpaceFrog

ben tu veux que certaines soient visible et d'autre non ????
il te faut influer sur le style des li ...
22/05/2007, 14h12
kevinf

Aide moi stp, car je coule:cry:

Citation:

Envoyé par kevinf

Aide moi stp, car je coule:cry:

Définis tes styles pour que toutes tes images soient affichées comme tu le souhaites.
Une fois fais, tu ajoutes pour tous display:none;
Ensuite, dans ton JS, remplaces
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 if (cmpx == 0) { } else if (cmpx == 1) { document.getElementById("weak").src = "pass0.jpg"; document.getElementById("medium").className = "nrm"; document.getElementById("strong").className = "nrm"; } else if (cmpx == 2) { document.getElementById("weak").className = "yellow"; document.getElementById("medium").className = "yellow"; document.getElementById("strong").className = "nrm"; } else { document.getElementById("weak").className = "green"; document.getElementById("medium").className = "green"; document.getElementById("strong").className = "green"; }
par
Code:

1 2 3 document.getElementById("weak").style.display=(cmpx==1)?"block":"none"; document.getElementById("medium").style.display=(cmpx==2)?"block":"none"; document.getElementById("strong").style.display=(cmpx>2)?"block":"none";
... à adapter car j'ai pas bien compris ce que tu voulais afficher dans quel cas :?

A+

EDIT : et la cas cmpx<1 est à gérer aussi sur le même mode ...

Il y a 36 mille manières de résoudre ton problème. la mienne n'est certainement pas la meilleure, SpaceFog va surement me le faire remarquer en me tappant sur les doigs :aie:
Attention, je n'ai pas testé, c'est le principe que j'énonce ici
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function evalPwd(s) { [...] document.getElementById("idDeLImage").visibility=visible; if (cmpx == 0) { document.getElementById("idDeLImage").src="pass0.jpg"; } else if (cmpx == 1) { document.getElementById("idDeLImage").src="pass1.jpg"; } else if (cmpx == 2) { document.getElementById("idDeLImage").src="pass2.jpg"; } else { document.getElementById("idDeLImage").src="pass3.jpg"; } [...] <div id="sm"> <img id="idDeLImage" src="pass0.jpg" style="visibility:hidden"> </div>

22/05/2007, 14h42
E.Bzz

Citation:

Envoyé par Ouach

Il y a 36 mille manières de résoudre ton problème. la mienne n'est certainement pas la meilleure, SpaceFog va surement me le faire remarquer en me tappant sur les doigs :aie:

On sera 2 :mrgreen:

:roll: tu travaille en entreprise ?

un petit exemple dans la veine du code que tu as déja ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<script type='text/javascript'>
function onlyone(obj){
 switch (obj){
 				case ('one') :  document.getElementById('one').className='on';
 								document.getElementById('two').className='off';
 								document.getElementById('three').className='off';
             					break;
 
 				case ('two') :  document.getElementById('one').className='off';
 								document.getElementById('two').className='on';
 								document.getElementById('three').className='off';
             					break;
 
 				case ('three') :  document.getElementById('one').className='off';
 								document.getElementById('two').className='off';
 								document.getElementById('three').className='on';
             					break;
             }
}
 
 
</script>             
</head>
 
<body>
<ul>
	<li id="one" class="on"><img src="" />one</li>
	<li id="two" class="off"><img src="" />two</li>
	<li id="three" class="off"><img src="" />three</li>
</ul>	
 
<input type="button" value="one" onclick="onlyone(this.value)" />
<input type="button" value="two" onclick="onlyone(this.value)" />
<input type="button" value="three" onclick="onlyone(this.value)" />
</body>
 
</html>

J'ai essayé cela, car ca a l'air d'être ce que je veux, mais rien ne s'affiche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function evalPwd(s)
{
	var cmpx = 0;
 
	if (s.length >= 1)
	{
		cmpx++;
 
		if (s.search("[A-Z]") != -1)
		{
			cmpx++;
		}
 
		if (s.search("[0-9]") != -1)
		{
			cmpx++;
		}
 
		if (s.length >= 15 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
		{
			cmpx++;
		}
	}
 
	document.getElementById("idDeLImage").visibility=visible;	
	if (cmpx == 0)
	{
		document.getElementById("idDeLImage").src="pass0.jpg";	
	}
	else if (cmpx == 1)
	{
		document.getElementById("idDeLImage").src="pass1.jpg";	
	}
	else if (cmpx == 2)
	{
		document.getElementById("idDeLImage").src="pass2.jpg";	
	}
	else
	{
		document.getElementById("idDeLImage").src="pass3.jpg";	
	}
 
}
</script>
</head>
 
<body>
 
<form>
<input type="text" size="24" onkeyup="evalPwd(this.value);" />
<div id="sm">
<img id="idDeLImage" src="pass0.jpg" style="visibility:hidden">
</div>
 
</form>
</body>
</html>

22/05/2007, 15h45
SpaceFrog

passe moi ton clavier ...
22/05/2007, 15h45
E.Bzz

Code:

<input type="text" size="24" onkeyup="evalPwd(this.value);" />

Oukélé la value ?
22/05/2007, 15h58
Ouach

Il y a une erreur javascript à la ligne 29 (il faut regarder en bas à gauche, s'il n'y a pas un petit panneau jaune dans ton browser IE)
Il faut écrire

Code:

document.getElementById("idDeLImage").style.visibility="visible";

En générale j'écrits mon code sans vérifier s'il est 100% exacte, je l'écrits pour faire passer un message, pour faire comprendre le principe. Il n'est pas à prendre pour argent content.
22/05/2007, 16h02
SpaceFrog

Citation:

Il n'est pas à prendre pour argent content.

:mouarf3:
il est content ton argent ... :mouarf:
en général il est plutot comptant ;)
22/05/2007, 17h31
kevinf

Merci beaucoup de votre aide à tous.