Boîte de texte avec saisie alphanumérique javascript

Question

J'ai une zone de texte, et il n'est pas nécessaire que l'utilisateur saisisse des caractères spéciaux. Il peut entrer:

1. A-Z
2. a-z
3. 0-9
4. Espace.

Une autre condition est la première lettre doit être alphabétique. Comment puis-je effectuer une vérification JavaScript à chaque pression de touche?

Answer 1

ajouter un onKeyUp = "javascript: checkChar (this);" à la boîte de saisie.

function checkChar(tBox) { 

    var curVal = tBox.value; 

    if (/[^A-Za-z0-9 ]/.test(curVal)) { 

     //do something because he fails input test. 

    } 

} 

alernatively pour vérifier juste la clé que vous avez appuyé pouvez saisir le code d'activation de l'événement comme ceci:

onKeyUp = "javascript: checkChar (événement);"

function checkChar(e) { 

    var key; 


    if (e.keyCode) key = e.keyCode; 
    else if (e.which) key = e.which; 

    if (/[^A-Za-z0-9 ]/.test(String.fromCharCode(key))) { 

     //fails test 

    } 

} 

raté la partie sur le premier caractère, mais vous pouvez faire un test sur la valeur de zone de texte comme dans le premier exemple:

/^[A-Za-z]/.test(curVal) 

ou même utiliser la deuxième méthode, mais passer la zone de texte et donc vous pouvez obtenir sa pleine valeur.

Answer 2

Vous devez vérifier la touche enfoncée dans le gestionnaire d'événements onkeydown de la zone de texte et, si les conditions ne sont pas conformes, return false à partir du gestionnaire. L'utilisation du clavier ne vous permettra pas d'empêcher l'entrée de caractère dans la zone de texte.

Answer 3

Je ne pense pas que vous devriez vérifier sur chaque touche, cela pourrait être très ennuyeux pour l'utilisateur. Il suffit de vérifier l'entrée quand elle perd la mise au point, ou lors de la soumission.

Pour ce faire, vous pouvez utiliser une expression régulière et utiliser ce modèle:

`/[a-z]{1}[a-z0-9]/i` 

Vous pouvez également jeter un oeil à la JQuery Validation Plugin

Answer 4

Cette fonction vérifie la chaîne donnée pour ces critères :

function checkvalue(value) { 
    return value.match(/[A-Za-z][A-Za-z0-9 ]*/); 
} 

Vous pouvez ensuite utiliser cela dans un événement onkeypress en transmettant la valeur actuelle.

Answer 5

Maintenant que nous avons HTML5, vous n'avez même pas besoin d'utiliser JavaScript. Vous pouvez utiliser l'attribut pattern.

<input type="text" pattern="[A-Za-z][A-Za-z0-9 ]*" title="Description of format" /> 

L'attribut pattern doit contenir un regular expression définissant le format. Et title devrait contenir une description lisible par l'homme du format.

Ensuite, lors de la validation, selon le navigateur, le navigateur affichera le champ en rouge et/ou affichera un message indiquant votre description du format.

Ce tutoriel va plus en détail: HTML5 Input Validation Tutorial.