Regex, damit nur Zahlen und Dezimalzahlen in Javascript nicht funktionieren

Ich versuche dies unter Code und die Regex funktioniert nicht und es erlaubt alle Zeichen in der Eingabebox.Regex, damit nur Zahlen und Dezimalzahlen in Javascript nicht funktionieren

Gewünscht: Das Eingabefeld sollte kein anderes Zeichen als Zahlen und Dezimalzeichen annehmen.

<html> 
<body> 
    <input type="text" onkeypress="myfunction(event);"></input> 
<script> 
    function myfunction(e){ 
     var p = new RegExp(/^[0-9]+([.][0-9]+)?$/); 
     return e.charCode === 0 || p.test(String.fromCharCode(e.charCode));  
    } 
</script> 
</body> 
</html>

Quelle

2017-02-01 Anshuma

Verwenden Sie '^ \ d + (\. \ D +)? $' – Jack

@Jack Das ist nicht der Grund, warum es fehlschlägt. –

Mögliches Duplikat von [Eingabe in Textbox beschränken: nur Zahlen und Dezimalzeichen zulassen] (http://stackoverflow.com/questions/2808184/restricting-input-to-textbox-allowing-only-numbers-and-decimal-point) – MYGz

Hier ist eine alternative Art und Weise. Ich verwende das oninput Ereignis, das bei jeder Wertänderung durch den Benutzer ausgelöst wird (nicht nur Tasten drücken). Ich speichere den letzten gültigen Wert und stelle ihn immer wieder her, wenn der neue Wert ungültig ist.

<input type="text" id="test1" oninput="validateNumber(this);" /> 
 
<script> 
 
var validNumber = new RegExp(/^\d*\.?\d*$/); 
 
var lastValid = document.getElementById("test1").value; 
 
function validateNumber(elem) { 
 
    if (validNumber.test(elem.value)) { 
 
    lastValid = elem.value; 
 
    } else { 
 
    elem.value = lastValid; 
 
    } 
 
} 
 
</script>

Im Gegensatz zu den meisten anderen Antworten hier das funktioniert einwandfrei mit allen Eingabetechniken wie Drag & Drop, copy'n'paste usw. Es unterstützt auch spezielle Steuertasten wie Ctrl+a (zum Auswählen von Inhalten), Pos1, End und so weiter.

Quelle

2017-02-01 13:48:21

Es gibt einen kleinen Nachteil im Zusammenhang mit der Benutzererfahrung mit diesem Ansatz. Immer wenn ein Benutzer einen Cursor innerhalb des bereits eingegebenen Wertes platziert und etwas eingibt, das nicht mit dem Muster übereinstimmt, springt der Cursor am Ende der Eingabe. –

Guter Punkt, @ WiktorStribiżew. Ich denke, das liegt daran, dass wir die gesamte Zeichenfolge durch eine falsche Eingabe ersetzen. Ich denke, es gibt keine Lösung dafür. –

Sie müssen die Position des Cursors speichern und dann zurückstellen. Ich habe es einmal versucht, und es war viel Code :( –

Sollte eine "Rückkehr" vor der Funktion hinzufügen.

HTML:

<input type="text" value="" onkeypress="return myfunction(event)" />

JS:

function myfunction(e){ 
    var p = new RegExp(/^[0-9]+([.][0-9]+)?$/); 
    return e.charCode === 0 || p.test(String.fromCharCode(e.charCode)); 
}

In Bezug auf die Regex: ""

das Problem mit der Regex ist die der ist ein Teil einer Teilmenge, die eine Nummer dahinter hat. Also: "5." ist ungültig, aber "5.3" ist gültig. Die Funktion läuft jedoch für alle Tasten drücken!

So wollen wir versuchen, schreiben: 5.3, die gültig sein sollte:

5 - gültig

. - ungültig

3 - "" gültig

Die Lösung wäre ein zu ermöglichen für sich allein, solange es nach einer Nummer kommt.

Danach müsste eine weitere Validierung erfolgen, um sicherzustellen, dass nach dem "." Ziffern stehen.

JSFIDDLE

Quelle

2017-02-01 13:12:36

Rückkehr machte es funktionell, aber es akzeptiert nicht jetzt Dezimal. – Anshuma

Diese Antwort zeigt, warum die Lösung des OP nicht funktioniert hat, aber keine Lösung bietet –

Der erste Teil löste ein Problem, der zweite Teil war eine Richtlinie, wie man das Regex Problem ("Punkt") löst. @ Wiktors Antworten Konzentriere dich auf die Lösung dieses Teils. –

Sie passieren 1 Zeichen jedes Mal an die myfunction Funktion, so dass Sie nicht den ganzen Wert mit /^[0-9]+([.][0-9]+)?$/ Regex überprüfen um sicherzustellen, dass Ihr Format eingehalten werden.

Überprüfen Sie, ob Sie Eingabe Ziffern oder erlauben nur einen Punkt eingeben, wenn kein Punkt noch im Eingabefeld:

<input type="text" id="test" onkeypress="return myfunction(event);" /> 
 
<script> 
 
function myfunction(e) { 
 
    return e.charCode === 0 || ((e.charCode >= 48 && e.charCode <= 57) || (e.charCode == 46 && document.getElementById("test").value.indexOf('.') < 0)); 
 
} 
 
</script>

Quelle

2017-02-01 13:27:28

So funktioniert das. Ich habe das schon einmal versucht.Ich war auf der Suche nach einer Lösung mit Regex allein, die mir eine "Ein-Liner" -Validierung gibt Ich kann es nicht benutzen, um dafür zu regexieren. – Anshuma

Dies scheitert bei Drag'n'Drop und Copy'n'Paste. Es bricht auch Tastatur-basierte Copy'n'Paste. –

Versuchen Sie, die Zeichenfolge in einem „Puffer“ zu speichern:

<html> 
<body> 
    <input type="text" onkeypress="myfunction(event);"></input> 
<script> 
    var inputString = ""; 
    function myfunction(e){ 
     if (e.charCode === 0) 
      return true; 
     var p = new RegExp(/^[0-9]+([.][0-9]+)?$/); 
     var testString = inputString + String.fromCharCode(e.charCode); 
     if (p.test(testString)) 
      return true; 
     inputString = testString;  
    } 
</script> 
</body> 
</html>

mit etwas Salz nehmen, da ich es nicht testen :)

Sie können auch nur den Inhalt der Eingabe gelesen , aber das ist nicht unbedingt schön. Auf der anderen Seite, mit meiner Lösung werden Sie Probleme mit Backspaces oder Benutzer haben, die in die Mitte des Textes klicken und so tippen. Dies ist nur, um Sie auf die Einschränkungen aufmerksam zu machen.

Quelle

2017-02-01 14:01:52

Wenige Korrekturen und es hat gut geklappt. Vielen Dank – Anshuma

Regex, damit nur Zahlen und Dezimalzahlen in Javascript nicht funktionieren

Antwort

Verwandte Themen