Bootstrap-Nummer Validierung

Question

Ich habe Bootstrap und ich habe ein Problem mit der Validierung. Ich brauche nur eine positive Ganzzahl einzugeben. Wie wird es implementiert?

Zum Beispiel:

<div>      
    <input type="number" id="replyNumber" data-bind="value:replyNumber" /> 
</div> 

Answer 1

Es ist Twitter nicht Bootstrap spezifisch, ist es eine normale HTML5-Komponente und Sie können den Bereich mit den min und max Attributen (in Ihrem Fall nur das erste Attribut) angeben. Zum Beispiel:

<div>      
    <input type="number" id="replyNumber" min="0" data-bind="value:replyNumber" /> 
</div> 

Ich bin mir nicht sicher, ob nur ganze Zahlen standardmäßig in der Steuerung erlaubt sind oder nicht, aber sonst kann man das step Attribut angeben:

<div>      
    <input type="number" id="replyNumber" min="0" step="1" data-bind="value:replyNumber" /> 
</div> 

Jetzt nur Zahlen höher (und gleich Null) kann verwendet werden und es gibt einen Schritt von 1, was bedeutet, dass die Werte 0, 1, 2, 3, 4, ... sind.

Ein Beispiel: http://jsfiddle.net/dcPgW/.

BE AWARE: Nicht alle Browser unterstützen die HTML5-Funktionen. Daher wird empfohlen, eine Art JavaScript-Fallback (und auch in Ihrem Back-End) zu verwenden, wenn Sie die Einschränkungen wirklich verwenden möchten.

Eine Liste der Browser, die dies unterstützen, finden Sie unter caniuse.com.

Answer 2

Nun, ich benutze immer den gleichen einfachen Weg und es funktioniert für mich. halten in Ihrem HTML den Typ als Text (wie diese):

<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" /> 

Danach Sie nur eine Methode hinzufügen müssen Javascript

<script type="text/javascript">  
function isNumber(evt) { 
     evt = (evt) ? evt : window.event; 
     var charCode = (evt.which) ? evt.which : evt.keyCode; 
     if ((charCode > 31 && charCode < 48) || charCode > 57) { 
      return false; 
     } 
     return true; 
    } 
</script> 

Mit dieser einfachen Validierung werden Sie nur positive Zahlen bekommen als du wolltest. Sie können die charCodes ändern, um Ihrer Methode weitere gültige Schlüssel hinzuzufügen.

Heres der Code Arbeits: Only numbers validation