jquery/JS autorise uniquement les chiffres et les lettres dans un champ de texte

Question

Quel serait le moyen le plus simple d'autoriser uniquement les lettres/chiffres dans une zone de texte? Nous utilisons JS/jQuery, mais ne voulons pas utiliser un plugin de validation?

Answer 1

Vous pouvez utiliser une expression régulière simple sur le formulaire submit pour évaluer le contenu de la zone de texte, afficher une erreur et arrêter l'envoi du formulaire. Faites une fonction hors de la vérification et vous pouvez également l'appliquer lorsque la zone de texte perd le focus. Faites-le très souvent et vous constaterez que vous avez réimplémenté le plugin de validation.

$(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; 
    } 
}); 

Answer 2

Si vous ne voulez pas utiliser de plugins - Qu'en est-il de la simple validation JS?

Je posté à ce sujet sur mon blog il y a un moment ->http://dotnetbutchering.blogspot.com/2009/04/definitive-javascript-validation-with.html

Vous verrez que la fonction dans ma solution proposée prend un champ d'entrée ID et une expression rationnelle (et vous devrez venir avec un regEx pour vos besoins de validation, devrait être assez trivial si vous voulez seulement aplhanumeric) et met l'arrière-plan du contrôle au vert ou au rouge en fonction du résultat de la validation. Je sais que ce n'est pas parfait, mais je pense que c'est suffisant pour démarrer, et vous pouvez l'utiliser comme point de départ pour lancer le vôtre. Je suis sûr qu'il existe des solutions élégantes avec JQuery ou JS, mais quelque chose dans ce sens a fonctionné très bien pour moi jusqu'à présent.

Espérons que ça aide.

Answer 3

Ma solution était la suivante:

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 essaie d'entrer dans autre chose qu'un chiffre, la lettre, l'espace ou la fonction retourne en évidence une chaîne avec les caractères bagués supprimés.

Answer 4

Depuis l'extrait de tvanfossen déclenche uniquement sur soumettre et de Ian est pas aussi joli que ce pourrait être, je veux juste ajouter une approche plus propre:

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; 
}); 

Answer 5

Ceci est une solution simple qui va vérifier l'entrée sur keyup et supprimer les caractères indésirables comme les types d'utilisateurs:

<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)); 
      } 
     }); 

La regex peut être modifiée pour s'adapter aux spécifications.

Answer 6

Une variante sur la réponse de Ian 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);