jquery / JS autoriser uniquement les numéros & les lettres dans un champ de texte

Quel serait le moyen le plus facile pour autoriser uniquement les lettres/numéros dans une zone de texte. Nous sommes en utilisant JS/jQuery, mais ne voulez pas utiliser un plugin de validation?

OriginalL'auteur Jorre | 2010-01-03

  1. 4

    Vous pouvez utiliser une simple regex sur le formulaire de soumission d'évaluer le contenu de la zone de texte, afficher une erreur, et d'arrêter le formulaire de soumission. Faire une fonction de le vérifier et vous pouvez également l'appliquer lorsque la zone de texte perd le focus. Le faire très souvent et vous verrez que vous avez réimplémentée la validation plugin.

    $(function() {
    $('form').submit( function() {
        return validateTB( $('#textbox'), true, $('#textboxError') );
    });

    $('#textbox').blur( function() {
        validateTB( $(this), true, $('#textboxError') );
    });

    function validateTB(tb,required,msg) {
        var $tb = $(tb);
        var re = '/^[a-z0-9]';
        if (required) {
           re += '+';
        }
        else {
           re += '*';
        }
        re += '$/';

        if ($tb.val().match(re) == null) {
           $(msg).show();
           return false;
        }
        $(msg).hide();
        return true;
    }
});
    +1 --> nice, extrait de

    OriginalL'auteur tvanfosson

  2. 4

    Ma solution était:

    jQuery('input[type="text"]').keyup(function() {
    var raw_text =  jQuery(this).val();
    var return_text = raw_text.replace(/[^a-zA-Z0-9 _]/g,'');
    jQuery(this).val(return_text);
});

    Chaque fois qu'un utilisateur tente de saisir autre chose qu'un nombre, une lettre, un espace ou un trait de soulignement la fonction retourne une chaîne de caractères avec la disparition de bandes caractères.

    Fonctionne parfaitement 🙂 je pense que C'est une meilleure approche que déjà, elle empêche l'utilisateur de saisir des caractères non valides. 🙂 Comment puis-je faire la même chose lorsque l'utilisateur appuie sur le bouton soumettre pour éviter toute soumission si il n'y a pas d'entrée dans la zone de texte?
    Mon approche n'était pas la façon la plus sûre, mais a été d'utiliser jQuery pour masquer le bouton soumettre jusqu'à ce que les données sont correctes. L'inconvénient est que l'utilisateur peut afficher le bouton à l'aide d'un débogueur. Donc fail safe a été d'ajouter des contrôles après la présentation pour s'assurer que les données étaient correctes. Puis informer l'utilisateur de leurs erreurs.

    OriginalL'auteur Ian

  3. 3

    Si vous ne voulez pas utiliser de plugins - est-Ce que certains de la plaine de vieux JS validation?

    J'ai posté à ce sujet sur mon blog tout à l'heure --> http://dotnetbutchering.blogspot.com/2009/04/definitive-javascript-validation-with.html

    Vous verrez que la fonction dans ma solution proposée prend un champ de saisie de l'ID et un regex (et vous aurez à venir avec une regEx pour vos besoins en matière de validation, devrait être assez trivial si vous ne souhaitez que aplhanumeric) et définit l'arrière-plan du contrôle de vert ou rouge, selon le résultat de la validation. Je sais que c'est pas parfait, mais je pense que c'est assez pour vous d'aller, et vous pouvez l'utiliser comme un point de départ pour restaurer votre propre.

    Je suis sûr qu'il y a granule des solutions élégantes à l'aide de jQuery ou de la plaine JS, mais quelque chose le long de ces lignes a travaillé très bien pour moi jusqu'à présent.

    Espère que cela aide.

    OriginalL'auteur JohnIdol

  4. 1

    Depuis tvanfossen l'extrait ne se déclenche que sur soumettre et Ian n'est pas aussi jolie qu'elle pourrait l'être, je veux juste ajouter une version plus propre approche:

    HTML:

    <input id="myinput" type="text">

    JS (jquery):

    $('#myinput').keypress(function (e) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
        return true;
    }
    e.preventDefault();
    return false;
});
    j'ai trouver le problème dans cette méthode lorsque je fais un copier-coller de la charte en entrée déposé #$%^&*() il ne bloque pas la charte

    OriginalL'auteur FlyingLemon

  5. 0

    C'est une solution simple qui permettra de vérifier l'entrée sur keyup et d'enlever les caractères que l'utilisateur tape:

    <input class="usr" type="text id="whatever" name="whatever" />

        $(".usr").keyup(function() {
            var n = $(this).val();
            if ( n.match("^[a-zA-Z0-9 ]*$") == null ) {
                $(this).val(n.slice(0,-1));
            }
        });

    Les regex peuvent être adaptés à des spécifications.

    OriginalL'auteur Pete - iCalculator

  6. 0

    Une variante de Ian réponse est un peu plus léger et plus court:

    function onlyAllowAlphanumeric() {
    this.value = this.value.replace(/[^a-zA-Z0-9 _]/g, '');
});

$('input[type="text"]').keyup(onlyAllowAlphanumeric);

    OriginalL'auteur Martijn