Textbox mit alphanumerischer Prüfung in Javascript

Question

Ich habe ein Textfeld, und es muss nicht zulassen, dass der Benutzer keine Sonderzeichen eingeben. Er kann eingeben:

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

Eine weitere Bedingung ist, dass der erste Buchstabe alphabetisch sein muss. Wie kann ich bei jedem Tastendruck eine JavaScript-Überprüfung durchführen?

Answer 1

Ein onKeyUp="javascript:checkChar(this);" in das Eingabefeld einfügen.

function checkChar(tBox) {   

    var curVal = tBox.value;

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

        //do something because he fails input test.

    }

}

alternativ können Sie den Tastencode aus dem Ereignis wie folgt abrufen, um zu prüfen, JEDE Taste, die gedrückt wurde:

onKeyUp="javascript:checkChar(event);"

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

    }

}

Ich habe den Teil mit dem ersten Zeichen übersehen, aber Sie können einen Test mit dem Textfeldwert wie im ersten Beispiel durchführen:

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

oder sogar die zweite Methode verwenden, aber auch das Textfeld übergeben, so dass Sie den vollen Wert erhalten können.

Answer 2

Diese Funktion prüft die ihr übergebene Zeichenkette auf diese Kriterien:

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

Diese können Sie dann in einem onkeypress-Ereignis verwenden, indem Sie den aktuellen Wert eingeben.

Answer 3

Jetzt, wo wir HTML5 haben, brauchen Sie nicht einmal mehr JavaScript zu verwenden. Sie können die pattern Attribut.

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

El pattern Attribut sollte ein regulärer Ausdruck die Definition des Formats. Und title sollte eine von Menschen lesbare Beschreibung des Formats enthalten.

Bei der Validierung wird das Feld je nach Browser rot umrandet und/oder eine Meldung mit Ihrer Beschreibung des Formats angezeigt.

In diesem Tutorial wird das Thema näher erläutert: HTML5 Eingabevalidierung Tutorial .

Answer 4

Sie sollten die gedrückte Taste im onkeydown-Ereignishandler des Textfelds überprüfen, und wenn die Bedingungen nicht erfüllt sind, dann return false aus dem Handler. Mit keyup können Sie nicht verhindern, dass ein Zeichen tatsächlich in das Textfeld eingegeben wird.

Answer 5

Ich glaube nicht, dass man bei jedem Tastendruck prüfen sollte, das könnte für den Benutzer sehr störend sein.

Überprüfen Sie einfach die Eingabe, wenn sie den Fokus verliert, oder beim Absenden.

Dazu können Sie eine Regex verwenden und dieses Muster verwenden:

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

Sie können auch einen Blick auf die JQuery Validierungs-Plugin