So dass Sie nur alphanumerische Zeichen in ein Formular-Textfeld mit Bootstrap?

Was ist der einfachste Weg, damit der Benutzer nur die Eingabe von a-z, 0-9 und Leerzeichen in einem text-Feld in einem Formular innerhalb von Bootstrap? Ich will nicht den Benutzer zum Beispiel in der Lage sein zu geben, die in Symbolen oder code oder so etwas.

dieses Q sitzt gerade mit Nein Antworten akzeptiert, es ist also nicht wirklich profitieren, die SO Gemeinschaft in keiner Weise. Connor, irgendeine chance, dass Sie feedback geben, auch wenn für die Geltendmachung der zwei Antworten bisher sind nicht gut? Wohl diese Frage könnte ein dupe zu einem mehr-generic 'regexp Eingabemaske' Frage und anstatt lassen Sie unbeantwortet, es sinnvoll zu finden, dupe, in die es zu verschmelzen.

InformationsquelleAutor connor martin | 2015-03-18

1

Benutze ich https://github.com/ruoso/jquery-regex-mask-plugin mit meinem Bootstrap-Stil Formen. Es funktioniert gut!

Kann ich nicht mehr genau, warum, aber ich schneiden Sie es nach unten, um nur dies:
```
$.fn.regexMask = function(mask) {
    $(this).keypress(function (event) {
        if (!event.charCode) return true;
        var part1 = this.value.substring(0, this.selectionStart);
        var part2 = this.value.substring(this.selectionEnd, this.value.length);
        if (!mask.test(part1 + String.fromCharCode(event.charCode) + part2))
            return false;
    });
};
```
Könnte man dann anwenden, um Ihre Eingaben mit:
```
var mask = new RegExp('^[A-Za-z0-9 ]*$')
$("input").regexMask(mask)
```
Demo:

http://jsfiddle.net/nqvsngd3/
- So können Sie die Maske anwenden, um eine bestimmte textbox-Eingabe mit einer bestimmten ID?
- yep, die man tun könnte, dass mit einem standard-jQuery-Selektor wie $("#my_input_id_here").regexMask(mask) und, dass die Arbeit nur auf das Textfeld.
- Funktioniert gut, vielen Dank. Aber es funktioniert nicht mit dem einfügen ungültige Zeichen in das Feld ein. Wie kann dies geändert werden, um mit diesen als gut?
- Jquery verwenden .ändern Sie() als event-handler. Sie müssen etwas anderen Logik, da Sie zum Durchlaufen der eingefügten chars. übereinstimmen Sie gegen Ihre regex, und Streifen Sie die ungültige lieben.
InformationsquelleAutor sifriday
1

Kombinieren Sie HTML5-Muster-Validierung, um zu verhindern, dass Benutzer die übermittlung Ungültiger Daten:
```
<input type="text" pattern="^[a-zA-Z0-9 ]+$" />
```
Weil die pattern ist nur geprüft bei Formular Absenden, müssen Sie fügen Sie eine kleine JS-Funktion zum validieren der Muster bereits während der Texteingabe:
```
$( 'body' ).on( 'keypress', ':input[pattern]', function( ev ) {
    var regex  = new RegExp( $(this).attr( 'pattern' ) );
    var newVal = $(this).val() + String.fromCharCode(!ev.charCode ? ev.which : ev.charCode);

    if ( regex.test( newVal ) ) {
        return true;
    } else {
        ev.preventDefault();
        return false;
    }
} );
```
Das jQuery-snippet überprüft automatisch die Eingabe-Muster aller Eingabefelder auf Ihrer Seite.

Hinweis: Nicht alle Muster können validiert werden während der Eingabe!

Zum Beispiel pattern="^[0-9]{4}$" (eine 4-stellige Zahl) kann nicht überprüft werden während der Eingabe, weil Ihre ersten Tastendruck wird die Eingabe einer 1-stelligen Zahl, vor der Eingabe der zweiten Ziffer, etc.

InformationsquelleAutor Philipp

Versuchen, diese...

<form method="post" action="">
    <input type="text" name="name" id="name" class="form-control" value="">
    <input type="submit" name="submit" class="btn btn-default" value="Submit">
</form>

jQuery(document).ready(function($){
    $('#name').keypress(function (e) {
        var regex = new RegExp("^[0-9a-zA-Z_\. ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        e.preventDefault();
        return false;
    });
});

InformationsquelleAutor Tanmay Patel

-1

Können Sie html verwenden, native pattern-Attribut für input.
```
<form action="demo_form.asp">
Country code: <input type="text" name="country_code" 
pattern="^[a-zA-Z0-9 ]+$" title="A-Z a-z 0-9 ' '">
<input type="submit">
</form>
```
check-in w3schools

auch eine nützliche Seite: http://html5pattern.com/
- Diese Lösung schränkt nicht die Werte, die eingegeben werden können in das Eingabefeld. Vielmehr wird das Formular validiert das Feld rechts, bevor Sie es übermitteln. Der OP fragte nach einem Weg, um zu verhindern, dass Benutzer auch die Eingabe von ungültigen Zeichen in der ersten Stelle...
InformationsquelleAutor Darshan Joshi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.