IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Autoriser le "." [RegExp]


Sujet :

JavaScript

  1. #1
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut Autoriser le "."
    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 :
    Plante :
    Plante :
    (je rajouterai le "@" quand ça fonctionnera...)

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Bonjour,
    il te faut profiter du travail de Christophe Porteneuve
    Enfin maîtriser les Expressions Rationnelles

  3. #3
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut
    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...)

  4. #4
    Expert confirmé Avatar de CosmoKnacki
    Homme Profil pro
    Justicier interdimensionnel
    Inscrit en
    Mars 2009
    Messages
    2 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Justicier interdimensionnel

    Informations forums :
    Inscription : Mars 2009
    Messages : 2 986
    Par défaut
    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.

  5. #5
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut
    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 !

  6. #6
    Expert confirmé Avatar de CosmoKnacki
    Homme Profil pro
    Justicier interdimensionnel
    Inscrit en
    Mars 2009
    Messages
    2 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Justicier interdimensionnel

    Informations forums :
    Inscription : Mars 2009
    Messages : 2 986
    Par défaut
    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.

  7. #7
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut
    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.

  8. #8
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Un détail : la classe \w équivaut à a-zA-Z0-9_, donc tu peux raccourcir ta regexp :
    Et du coup, plus besoin du flag i.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  9. #9
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut
    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.

  10. #10
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    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 ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  11. #11
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo