Discussion :

[slack457]

Bonjour,

j'aimerai interdire de rentrer des caractères spéciaux dans certains champs de mon formulaire d'inscription.

par exemple dans le champ "userName", interdire tout ce qui n'est pas alpha-numérique, ou "_" ou "-"

Code :

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

1
2
3
4
5
6
7
8
function restrictive_userName()
{
    var input = document.getElementById('input_userName');
    while (input.value.match(/[^a-zA-Z0-9_-]/))
    {
    	input.value = input.value.replace(/[^a-zA-Z0-9_-]/,'');
    }
}

Ça fonctionne.

J'ai voulu continuer avec le champ "email" auquel il faudrait la même règle que pour le "userName", avec en plus lui autoriser les caractères "@" et "."

Code :

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

1
2
3
4
5
6
7
8
function restrictive_email()
{
    var input = document.getElementById('input_email');
    while (input.value.match(/[^a-zA-Z0-9_-]/))
    {
    	input.value = input.value.replace(/[^a-zA-Z0-9_\.-]/,'');
    }
}

Mais ce code fait planter tous les navigateurs avec lesquels j'ai essayé (FireFox, GoogleChrome, Opera, Safari)

si j'enlève le "\." ça fonctionne, si je le laisse ça plante.

Fonctionne :

Code :

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

/[^a-zA-Z0-9_-]/

Plante :

Code :

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

/[^a-zA-Z0-9_\.-]/

Plante :

Code :

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

/[^a-zA-Z0-9_\\.-]/

(je rajouterai le "@" quand ça fonctionnera...)

[NoSmoking]

Bonjour,
il te faut profiter du travail de Christophe Porteneuve
Enfin maîtriser les Expressions Rationnelles

[slack457]

Super ça fonctionne !

Merci NoSmoking pour le lien.
Je me suis posé pour prendre le temps de bien tout lire.

J'ai pu trouver une phrase qui corresponderai à mon problème au paragraphe VIII-D :

En réalité, pour que cet exemple soit vraiment blindé, il faudrait d'abord « échapper » les caractères spéciaux saisis (spéciaux au sens des regex), en les préfixant par un backslash (\), mais vous saisissez l'idée.

Mais c'est déjà ce que je faisais... (échapper le caractère spécial "." avec un "\") et ça ne fonctionne pas.

Plus loin je lis ça :

Celle-ci (la bibliothète "XRegExp") nous offre de nouvelles syntaxes, de nouveaux drapeaux de traitement et va même jusqu'à corriger quelques bogues exotiques des moteurs de regex proposés par les principaux navigateurs.

À ce moment-là je me dis que finalement j'avais peut-être bien fais les choses et que j'ai affaire à un bogue...
Alors je tente d'utiliser XRegExp !

J'ai fini par écrire ça :

Code :

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

1
2
3
4
5
6
7
8
function restrictive_email()
{
    var regexp = XRegExp('[^a-z0-9_\@.-]', 'ig');
 
    var input = document.getElementById('input_email');
 
    input.value = XRegExp.replace(input.value, regexp, '');
}

Et c'est bon ^^

ne pas oublier d'inclure la librairie XRegExp... à télécharger sur leur site http://xregexp.com/
je ne l'avais pas fait et j'ai tourné en bourrique à essayer de trouver une erreur dans mon code alors qu'il n'y en avait pas... (il manquait juste la librairie quoi...)

[CosmoKnacki]

Il est totalement inutile d'utiliser XRegExp pour si peu. Les caractères spéciaux n'ont tout simplement pas besoin d'être échappés dans une classe de caractère.

Code :

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

1
2
3
4
5
function restrictive_email()
{
    var input = document.getElementById('input_email');
    input.value = input.value.replace(/[^a-z0-9@._-]+/gi, '');
}

Il est inutile d'utiliser while et match vu que replace avec le flag g traite toute la chaîne. Le modifier i rend la recherche insensible à la casse, g précise que la recherche s' effectue sur toute la chaîne (pas seulement la première occurence). Le point qui est un caractère spécial dans une regex devient un caractère comme un autre dés qu'il est placé dans une classe de caractère. L'arobase, quant à lui, n'a aucune signification particulière dans une regex. Le quantifier + permet de remplacer plusieurs caractères d'un coup.

[slack457]

Les caractères spéciaux n'ont tout simplement pas besoin d'être échappés dans une classe de caractère

Mince ça m'avait échappé ça...

Il est inutile d'utiliser while et match vu que replace avec le flag g traite toute la chaîne

Mince ça je venais de l'apprendre dans le lien, j'aurai du m'en rendre compte tout seul...

-------------------------------------------------------------------------------------------------------------

Bon ben merci CosmoKnacki, c'est bien mieux comme tu dis :

Code :

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

1
2
3
4
5
6
function restrictive_email()
{
    var input = document.getElementById('input_email');
 
    input.value = input.value.replace(/[^a-z0-9_.@-]/ig,'');
}

Mais alors merde le fait d'échapper le "." dans des crochets faisait tout planter..? (bon à savoir...)

Par contre je ne pige pas trop l'utilisation du "+" vu qu'on utilise le drapeau "g", je vais supposer que c'est une erreur...

Merci beaucoup !

[CosmoKnacki]

Non ce n'est pas une erreur! + signifie: "répéter une fois ou plus." Effectivement si on le supprime ça marche toujours vu que la recherche est globale. Voici ce qui se passe pour la chaîne 'abc$de.&é"()èçfgh@ijkl.mn' avec et sans:

• avec le +:

  +----------------+--------------------------+
  | correspondance | remplacement             |
  +----------------+--------------------------+
  | $              | abcde.&é"()èçfgh@ijkl.mn |
  +----------------+--------------------------+
  | &é"()èç        | abcde.fgh@ijkl.mn        |
  +----------------+--------------------------+

• sans le +:

  +----------------+--------------------------+
  | correspondance | remplacement             |
  +----------------+--------------------------+
  | $              | abcde.&é"()èçfgh@ijkl.mn |
  +----------------+--------------------------+
  | &              | abcde.é"()èçfgh@ijkl.mn  |
  +----------------+--------------------------+
  | é              | abcde."()èçfgh@ijkl.mn   |
  +----------------+--------------------------+
  | "              | abcde.()èçfgh@ijkl.mn    |
  +----------------+--------------------------+
  | (              | abcde.)èçfgh@ijkl.mn     |
  +----------------+--------------------------+
  | )              | abcde.èçfgh@ijkl.mn      |
  +----------------+--------------------------+
  | è              | abcde.çfgh@ijkl.mn       |
  +----------------+--------------------------+
  | ç              | abcde.fgh@ijkl.mn        |
  +----------------+--------------------------+

Donc ajouter le + évitera 6 allez-retours (pour le présent exemple) entre recherche de correspondance et remplacement.

[slack457]

ah d'accord,

ça fonctionne sans le "+",
mais c'est moins optimisé niveau performance d'exécution,
donc je le rajoute !

Merci pour l'explication.

[Watilin]

Un détail : la classe \w équivaut à a-zA-Z0-9_, donc tu peux raccourcir ta regexp :

Code :

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

/[^\w.@-]+/g

Et du coup, plus besoin du flag i.

[slack457]

ben justement comme tu dis, en lisant le lien je me suis dit que j'allais faire ça.

alors j'ai modifié :

Code :

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

input.value = input.value.replace(/[^a-z0-9_.@-]+/ig, '');

par :

Code :

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

input.value = input.value.replace(/[^\w_.@-]+/g, '');

mais ça ne fonctionne pas.

[Watilin]

Chez moi avec Firebug ça marche.

Code :

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

1
2
>>> "²truc-$^bidule@%µ$+`è chose.}co:m".replace(/[^\w_.@-]+/g, '')
"truc-bidule@chose.com"

Pourquoi « ça ne fonctionne pas » ? Précise s'il-te-plaît. Un mauvais résultat, un message d'erreur ?

[slack457]

Désolé,
il n'y a pas de message d'erreur non.

Quand ça fonctionne :
Quand j'écris un caractère interdit (comme un point d'interrogation par exemple...) dans mon champ, celui-ci est instantanément effacé.

Quand ça ne fonctionne pas :
Le caractère interdit ne s'efface pas.

Étrange, chez moi (Firefox 27.0.1) ça ne fonctionne pas.