Caractères crochets ouvrant/fermant coriaces

**decondelite** · 28/12/2010, 15h58

Bonjour à tout le monde, et surtout aux bonnes volontés qui passent beaucoup de temps à lire et résoudre les problèmes des autres.

Vous ne me connaissez probablement pas, étant donné que la dernière fois que j'ai posté sur Developpez c'est il y a 3 ans dans la section Visual Basic.

J'ai commencé il y a quelques temps le développement d'un site web, et je m'attaque à la partie "Inscription" où je contrôle dynamiquement les champs avec jS.

Tout ceci marchait super bien (de jolis cadres verts/rouges/oranges apparaissant et disparaissant en fonction des saisies, des champs activés/désactivés en fonction du radio coché) jusqu'à ce que je décide de rajouter les crochets dans l'expression régulière de contrôle de l'identifiant. Et là, j'ai lu des TONNES de tutos et autres questions similaires déjà posées sur le web: RIEN n'a pu m'aider.

Dès que je rajoute les crochets dans l'expression régulière, de quelque manière que ce soit, le login est reconnu comme étant invalide (du moins le cadre d'erreur affiche systématiquement "login invalide" au lieu de "login valide" ou "4 caractères minimum", quel que soit le contenu du champ), et malheureusement je travaille actuellement sur un ordinateur coupé du web et non doté du module "web developper" pour firefox.

Enfin bref, sans plus tarder, voici mon fichier de script jS. Vous me direz probablement que c'est mal foutu ou autre, j'accepte les critiques (constructives...), de toute façon le jS c'est pas ma spécialité et j'ai cherché à faire quelque chose de joli sans me casser la tête. Sachez juste que sans les crochets, ça marche nickel.

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
var pass_strength;
var prev=new Array("","","","","");
var valid=new Array(0,0,0,0,0);
 
function  InscTimer()
{
    setTimeout("InscTimer()",500);
	TestAll();
}
InscTimer();
 
function TestAll()
{
	TestInscFieldChange('insc_login',0,'^[]a-z0-9\'[-]*$','none');
	TestInscFieldChange('insc_pass',1,'^[a-z0-9]*$','none');
	TestInscFieldChange('insc_pass_conf',2,'^[a-z0-9]*$','insc_pass');
	TestInscFieldChange('insc_email',3,'^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$','none');
	TestInscFieldChange('insc_email_conf',4,'^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$','insc_email');
}
 
function TestInscFieldChange(fieldname,fieldnum,regex,reference)
{
	var field=document.getElementById(fieldname);
	if (field==undefined)
	{
		valid[fieldnum]=0;
		return;
	}
	var value=field.value;
	if (field.value=='') ResetInscError(field,fieldnum);
	else if (field.value!=prev[GetInputId(field)]) TestInscField(field,regex,reference);
}
 
function TestInscField(field,regex,reference)
{
	var regobj=new RegExp(regex,"gi");
	var text=field.value;
	if (text=='')
	{
		ResetInscError(field);
		return;
	}
	var text2;
	if (reference=='none')
	{
		if (!regobj.test(text)) DispInscError(field);
		else if (field.name=="insc_login") UpdateLoginError(field,regex);
		else if (field.name=="insc_pass") UpdatePassError(field);
		else DispInscGood(field);
	}
	else
	{
		text2=document.getElementById(reference).value;
		if (text!=text2) DispInscError(field);
		else DispInscGood(field);
	}
}
 
function DispInscError(field)
{
	var fieldname=field.name;
	var text='<p class=\'insc_error\'>';
	switch (fieldname)
	{
		case 'insc_login':
			text+='Login invalide';
			break;
		case 'insc_pass':
			text+='Mot de passe invalide: lettres et chiffres uniquement';
			break;
		case 'insc_pass_conf':
			text+='Mot de passe et confirmation différents';
			break;
		case 'insc_email':
			text+='Adresse email invalide';
			break;
		case 'insc_email_conf':
			text+='Adresse email et confirmation différentes';
			break;
		default:
			text+='Erreur inconnue';
			break;
	}
	valid[GetInputId(field)]=0;
	document.getElementById(fieldname+'_error').innerHTML=text+'</p>';
}
 
function ResetInscError(field,fieldnum)
{
	valid[fieldnum]=0;
	document.getElementById(field.name+'_error').innerHTML="";
}
 
function DispInscGood(field)
{
	var fieldname=field.name;
	var text='<p class=\'insc_good\'>';
	switch (fieldname)
	{
		case 'insc_login':
			text+='Login valide';
			break;
		case 'insc_pass_conf':
			text+='Les mots de passe concordent';
			break;
		case 'insc_email':
			text+='Adresse email valide';
			break;
		case 'insc_email_conf':
			text+='Les deux adresses concordent';
			break;
		default:
			text+='Erreur inconnue';
			break;
	}
	valid[GetInputId(field)]=1;
	document.getElementById(fieldname+'_error').innerHTML=text+'</p>';
}
 
function evalPwd(s)
{
	var cmpx = 0;
	if (s.length < 8) return 0;
	cmpx++;
	if (s.search("[A-Z]") != -1) cmpx++;
	if (s.search("[a-z]") != -1) cmpx++;
	if (s.search("[0-9]") != -1) cmpx++;
	if (s.length >= 10) cmpx++;
	if (s.length >= 14) cmpx++;
	switch (cmpx)
	{
		case 1: return 1;
		case 2: return 1;
		case 3: return 1;
		case 4: return 2;
		case 5: return 2;
		case 6: return 3;
	}
}
 
function UpdatePassError(field)
{
	var pass_strength=evalPwd(field.value);
	var text;
	switch(pass_strength)
	{
		case 0:
			text='<p class=\'insc_error\'>8 caractères minimum</p>';
			break;
		case 1:
			text='<p class=\'pass_weak\'>Mot de passe faible</p>';
			break;
		case 2:
			text='<p class=\'pass_avg\'>Mot de passe moyen</p>';
			break;
		case 3:
			text='<p class=\'pass_strong\'>Mot de passe fort</p>';
			break;
	}
	if (pass_strength==0) valid[GetInputId(field)]=0;
	else valid[GetInputId(field)]=1;
	document.getElementById('insc_pass_error').innerHTML=text;
}
 
function UpdateLoginError(field,regex)
{
	if (field.value.length<4)
	{
		document.getElementById('insc_login_error').innerHTML='<p class=\'insc_error\'>4 caractères minimum</p>';
		valid[GetInputId(field)]=0;
	}
	else
	{
		var regobj=new RegExp(regex,"gi");
		if (!regobj.test(field.value)) DispInscError(field);
		else DispInscGood(field);
	}
}
 
// Ignorez cette fonction, je l'ai jamais mise en service
function UpdateLoginError2(field)
{
	var xhr=getXMLHttpRequest();
	var login=encodeURIComponent(field.value);
	xhr.open('POST','includes/freeusername.inc.php', true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send('tested_login='+login);
}
 
function InscCheckAll()
{
	TestAll();
	for(var i=0; i<5; i++)
	{
		if (!valid[i])
		{
			alert('Des données sont encore incomplètes ou incorrectes dans le formulaire! Veuillez corriger avant de passer à l\'étape suivante!');
			return;
		}
	}
	document.forms["inscription"].submit();
}
 
function GetInputId(field)
{
	switch (field.name)
	{
		case "insc_login": return 0;
		case "insc_pass": return 1;
		case "insc_pass_conf": return 2;
		case "insc_email": return 3;
		case "insc_email_conf": return 4;
		default: return -1;
	}
}
 
function IsEnit()
{
	document.getElementById('insc_promotion').disabled=false;
	document.getElementById('insc_isouh_no').disabled=false;
	document.getElementById('insc_isouh_yes').disabled=false;
}
 
function IsNotEnit()
{
	document.getElementById('insc_promotion').disabled=true;
	document.getElementById('insc_isouh_no').disabled=true;
	document.getElementById('insc_isouh_no').checked="checked";
	document.getElementById('insc_isouh_yes').disabled=true;
	IsNotOuh();
}
 
function IsOuh()
{
	document.getElementById('insc_isouh_passfield').innerHTML='<label for="insc_isouh_pass">MDP?</label><input type="password" id="insc_isouh_pass" name="insc_isouh_pass" size="24" maxlength="24"/>';
}
 
function IsNotOuh()
{
	document.getElementById('insc_isouh_passfield').innerHTML='';
}

EDIT: si la réponse est dans la FAQ ou autres, merci de ne pas vociférer la bave aux lèvres, j'y ai déjà cherché et j'ai pas réussi à trouver.

**SpaceFrog** · 28/12/2010, 16h09

et en les echappant avec \ ?

**Eric2a** · 28/12/2010, 16h11

Salut,

Code :

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

TestInscFieldChange('insc_login',0,'^[a-z0-9\'-]*$','none');

?

**Bovino** · 28/12/2010, 16h12

Si j'ai bien compris, tu veux accepter les crochets dans le pattern ?
Si c'est ça, ton expression

Code :

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

'^[]a-z0-9\'[-]*$'

est mauvaise, il faut échapper les crochets à l'intérieur :

Code :

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

'^[\]a-z0-9\'\[-]*$'

**decondelite** · 28/12/2010, 16h15

Non, on ne peut (doit) pas les échapper à l'intérieur d'un intervalle de classe, c'est écrit noir sur blanc sur plusieurs sites. J'avais déjà essayé, et ça marche encore moins bien: le script plante et j'ai aucun cadre d'affichage d'erreur ou de validité.

J'ai lu je sais plus où que dans un tel cas il fallait mettre le crochet fermant au tout début de l'intervalle, et le crochet ouvrant n'importe où. Ce que je sais, c'est que ça marche pour le crochet ouvrant. Le problème principal, c'est ce fichu crochet fermant.

J'avais aussi essayé un truc du style "([a-zA-Z0-9-]|\[|\])*", mais ça marche pas.

**SpaceFrog** · 28/12/2010, 16h16

heu sisi ...

http://www.developpez.net/forums/d67...gexp-crochets/

**decondelite** · 28/12/2010, 16h24

A l'extérieur d'une classe oui, mais PAS à l'intérieur d'une classe: les caractères crochets sont soumis à des règles particulières à l'intérieur d'un intervalle, enfin d'après ce que j'ai pu lire. Je sais pas si j'ai le droit de quoter un site externe pour appuyer mes dires... je me souviens plus trop de la politique de Developpez par rapport à ça.

Si oui, je vous posterais volontiers le lien.

**franculo_caoulene** · 28/12/2010, 16h25

Salut,

Tu utilises l'objet RegExp plutôt que la forme littérale. Dans ce cas tu dois doubler le caractère \ d'échappement. Ce qui donne \\[ plutôt que \[.

edit : ah ben j'avais déjà donné la réponse! decondelite il n'y a pas de classe en javascript, il n'y a que des objets.

**Bovino** · 28/12/2010, 16h31

Code :

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

1
2
var reg = new RegExp('[a-z\\]]','g')
alert(reg.test(']'))

Et oui, désolé pour l'oubli du double échappement

**SpaceFrog** · 28/12/2010, 16h32

dans le lien donné ils sont bien à l'intérieur de la classe ...

Code :

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

1
2
truc="[]"
alert(/[\[\]]/.test(truc))

**decondelite** · 28/12/2010, 16h40

EDIT: je m'étais planté dans le remplacement, ça marche effectivement avec le double échappement. Ceci dit, SEUL le crochet fermant doit être double échappé: on peut s'en passer pour le crochet ouvrant.

J'utilise ceci du coup:
'[\\]a-z0-9\'[]'

**SpaceFrog** · 28/12/2010, 16h42

si tu as besoin de deux caractères d'echappement c'est que tu rediges ton js avec php ?

**Bovino** · 28/12/2010, 16h48

Envoyé par decondelite

Au fait, ai-je le droit de quoter un autre site ou pas?

Oui, tu peux.

**SpaceFrog** · 28/12/2010, 16h49

heu tu fais un test ...
et pas un match ...

Code :

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

1
2
truc="[,,]"
alert(/^[\[\]]$/.test(truc))

Code :

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

1
2
truc="[,,]"
alert(/[\[\]]/.test(truc))

pas pareil

Code :

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

1
2
truc="[,,]"
alert((truc.match(/[\[\]]/))?true:false)

**decondelite** · 28/12/2010, 16h54

Désolé, j'ai édité pendant que vous postiez... J'ajoute juste que c'est dans ce genre de situation que je me dis que j'ai beau avoir 6 ans d'expérience de codage dans 5-6 langages différents, je suis toujours un noob...

**SpaceFrog** · 28/12/2010, 16h56

Oui enfin les regexp c'est particulier tout de même ...

Caractères crochets ouvrant/fermant coriaces [RegExp]

JavaScript

Discussions similaires

Partager

Partager