Code de puissance de mot de passe

**kevinf** · 22/05/2007, 10h17

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Ouach** · 22/05/2007, 10h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

C'est à dire réassigner une nouvelle image à ta balise.

**SpaceFrog** · 22/05/2007, 10h29

mets les images dans les li ???

pas très orhtodoxe mais modification à moindre frais ...

**kevinf** · 22/05/2007, 10h37

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.

**SpaceFrog** · 22/05/2007, 10h42

au lieu de changer le color, tu changes le style.visibility ou le style.display

**kevinf** · 22/05/2007, 10h44

Pourrait tu me montrer avec le code?

Merci d'avance de ton aide.

**SpaceFrog** · 22/05/2007, 10h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**kevinf** · 22/05/2007, 11h04

Je suis vraiement désolé, mais le Javacript n'est pas trop mon fort, je suis plus vers le PHP.

**SpaceFrog** · 22/05/2007, 11h10

javascript est bien plus simple que php et là en l'occurence c'est plus css qu'il faut connaitre ...

**kevinf** · 22/05/2007, 11h47

J'ai essayé, sans succès...

**SpaceFrog** · 22/05/2007, 11h49

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

**kevinf** · 22/05/2007, 12h00

Ca ne donne rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 22/05/2007, 12h18

et le display:none ?

**kevinf** · 22/05/2007, 12h21

Mais je ne comprend pas, pour moi je ne devrais pas utiliser de CSS vu que c'est juste une succession d'images.

**SpaceFrog** · 22/05/2007, 12h24

ben tu veux que certaines soient visible et d'autre non ????
il te faut influer sur le style des li ...

**kevinf** · 22/05/2007, 14h12

Aide moi stp, car je coule

**E.Bzz** · 22/05/2007, 14h34

Envoyé par kevinf

Aide moi stp, car je coule

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Ouach** · 22/05/2007, 14h41

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

Attention, je n'ai pas testé, c'est le principe que j'énonce ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**E.Bzz** · 22/05/2007, 14h42

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

On sera 2

**SpaceFrog** · 22/05/2007, 14h48

tu travaille en entreprise ?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Code de puissance de mot de passe

JavaScript

Discussions similaires

Partager

Partager