JavaScript - Test auf eine Ganzzahl

77

Ich habe ein Textfeld, in das ein Benutzer sein Alter eingeben kann. Ich versuche, mit JavaScript eine clientseitige Validierung für dieses Feld durchzuführen. Ich habe bereits eine serverseitige Validierung eingerichtet. Ich kann jedoch nicht überprüfen, ob der Benutzer eine tatsächliche Ganzzahl eingibt. Ich versuche derzeit den folgenden Code:

    function IsValidAge(value) {
        if (value.length == 0) {
            return false;
        }

        var intValue = parseInt(value);
        if (intValue == Number.NaN) {
            return false;
        }

        if (intValue <= 0)
        {
            return false;
        }
        return true;
    }

Das Seltsame ist, ich habe einzelne Zeichen wie "b" in das Textfeld eingegeben und diese Methode gibt true zurück. Wie stelle ich sicher, dass der Benutzer nur eine Ganzzahl eingibt?

Vielen Dank

user70192
quelle
4
Nur eine verwandte Anmerkung, Sie sollten parseInt () immer mit zwei Parametern aufrufen - dem Wert und dem Radix (Basis). Andernfalls versucht parseInt (), die Basis Ihrer Eingabe zu erraten.
Waxwing
1
Wenn der Benutzer "1.1" eingibt, soll die Validierung fehlschlagen oder er muss auf "1" gesetzt werden?
Nosredna
1
Und ist "1.0" eine ganze Zahl?
Nosredna
MDN-Erwähnungen: Verwenden Sie Number.isNaN()oder isNaN()um am klarsten zu bestimmen, ob ein Wert vorliegt NaN.
Torsten Römer

Antworten:

8

AKTUALISIEREN

Ich habe den Code festgelegt , die einen Fehler hatte und fügte hinzu , ein var genannt Schlüssel den Schlüssel zu speichern gedrückt Code keyCode und welche , die des Browsers ab.

var key = e.which || e.keyCode;

Danke Donald.McLean :)


Wenn Sie überprüfen möchten, ob Sie während der Eingabe Zahlen schreiben (und vermeiden, andere Zeichen in Ihr Eingabefeld zu schreiben), können Sie diese einfache Funktion verwenden und die zulässigen Elemente definieren (dies schließt alles ein, was Sie filtern möchten). Auf diese Weise können Sie nicht nur Ganzzahlen, sondern beispielsweise eine bestimmte Gruppe von Zeichen auswählen. Das Beispiel basiert auf jQuery, um es an ein Eingabefeld anzuhängen.

$('#myInputField').keypress(function(e)
{
    var key = e.which || e.keyCode;

    if (!(key >= 48 && key <= 57) && // Interval of values (0-9)
         (key !== 8) &&              // Backspace
         (key !== 9) &&              // Horizontal tab
         (key !== 37) &&             // Percentage
         (key !== 39) &&             // Single quotes (')
         (key !== 46))               // Dot
    {
        e.preventDefault();
        return false;
    }
});

Wenn Sie einen anderen als den definierten Schlüssel verwenden, wird dieser nicht im Feld angezeigt. Und weil Angular.js heutzutage stark wird. Dies ist die Anweisung, die Sie erstellen können, um dies in einem beliebigen Bereich Ihrer Web-App zu tun:

myApp.directive('integer', function()
{
    return function (scope, element, attrs)
    {
        element.bind('keydown', function(e)
        {
            var key = e.which || e.keyCode;

            if (!(key >= 48 && key <= 57) && // Interval (0-9)
                 (key !== 8) &&              // Backspace
                 (key !== 9) &&              // Horizontal tab
                 (key !== 37) &&             // Percentage
                 (key !== 39) &&             // Single quotes (')
                 (key !== 46))               // Dot
            {
                e.preventDefault();
                return false;
            }
        });
    }
});

Aber was passiert, wenn Sie ng-repeatdiese Richtlinie verwenden möchten und sie nur in einer bestimmten Anzahl von Feldern anwenden müssen? Nun, Sie können die obere Direktive in eine Direktive umwandeln, die bereit ist, einen wahren oder falschen Wert zuzulassen , um entscheiden zu können, welches Feld davon betroffen sein wird.

myApp.directive('rsInteger', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if (attrs.rsInteger === 'true') {
                element.bind('keydown', function(e)
                {
                    var key = e.which || e.keyCode;

                    if (!(key >= 48 && key <= 57) && // Interval (0-9)
                         (key !== 8) &&              // Backspace
                         (key !== 9) &&              // Horizontal tab
                         (key !== 37) &&             // Percentage
                         (key !== 39) &&             // Single quotes (')
                         (key !== 46))               // Dot
                    {
                        e.preventDefault();
                        return false;
                    }
                });
            }
        }
    }
});

Um diese neue Direktive zu verwenden, müssen Sie sie nur in einem Text vom Typ Eingabe eingeben, zum Beispiel:

<input type="text" rs-integer="true">

Hoffe es hilft dir.

Timbergus
quelle
Vielen Dank Donald.McLean, aber nicht für die Schlüssel, sondern für den Browser: keyCode und beobachten, wie ich hier gefunden habe ( stackoverflow.com/questions/4471582/javascript-keycode-vs-which ), hängt vom Browser ab.
Timbergus
131
var intRegex = /^\d+$/;
if(intRegex.test(someNumber)) {
   alert('I am an int');
   ...
}

Das wird absolut positiv scheitern, wenn der Benutzer etwas anderes als eine nichtnegative Ganzzahl eingibt.

karim79
quelle
7
Dies schlägt auch fehl, wenn der Benutzer eine negative Ganzzahl eingibt.
Jason S
3
(Natürlich ist das Alter nicht negativ, aber Sie sollten genau wissen, ob Sie auf eine Ganzzahl oder eine nichtnegative Ganzzahl testen.)
Jason S
6
'0' gibt true zurück.
Hurra, ich helfe
4
Ein Array mit einem ganzzahligen Element gibt auch true zurück (intRegex.test ([42]))
Marius Olsthoorn
2
Für zukünftige Besucher wird diese Antwort in dieser Frage erklärt .
Gdoron unterstützt Monica
31

Verwenden Sie für eine echte Int-Überprüfung Folgendes:

function isInt(value) { 
    return !isNaN(parseInt(value,10)) && (parseFloat(value,10) == parseInt(value,10)); 
}

Das Problem bei vielen int-Prüfungen besteht darin, dass sie für 1.0 'false' zurückgeben, was eine gültige Ganzzahl ist. Diese Methode überprüft, ob der Wert von float und int parsing gleich ist. Für # .00 wird also true zurückgegeben.

AKTUALISIEREN:

In den Kommentaren, die ich der Antwort für zukünftige Leser hinzufügen werde, wurden zwei Themen erörtert:

  • Erstens funktioniert diese Methode nicht, wenn Zeichenfolgenwerte analysiert werden, bei denen die Dezimalstelle durch ein Komma angegeben wird. (Kein Wunder, wie könnte es sein? Angesichts von "1.001" zum Beispiel in den USA ist es eine ganze Zahl, während dies in Deutschland nicht der Fall ist.)
  • Zweitens hat sich das Verhalten von parseFloat und parseInt in bestimmten Browsern geändert, seit diese Antwort geschrieben wurde, und variiert je nach Browser. ParseInt ist aggressiver und verwirft Buchstaben, die in einer Zeichenfolge erscheinen. Dies ist großartig, um eine Nummer zu erhalten, aber nicht so gut für die Validierung.

Meine Empfehlung und Praxis, eine Bibliothek wie Globalize.js zu verwenden, um numerische Werte für / von der Benutzeroberfläche anstelle der Browser-Implementierung zu analysieren und die nativen Aufrufe nur für bekannte "programmgesteuert" bereitgestellte Werte zu verwenden, z. B. eine aus einem XML-Dokument analysierte Zeichenfolge .

Paul
quelle
@Cesar, soweit ich weiß, gibt es keine Programmiersprachen, die 1,2 als Ganzzahl oder als einzelnen numerischen Wert behandeln.
ThaMe90
@ ThaMe90 Das stimmt, aber in meinem Fall habe ich die Funktion isInt verwendet, um externe Eingaben zu validieren. '1,2' ist eine gültige Zahl in einigen Ländern, in denen das Komma als Dezimaltrennzeichen verwendet wird. Siehe: en.wikipedia.org/wiki/File:DecimalSeparator.svg
Cesar Canassa
2
function isInt(value) { return !isNaN(parseInt(value, 10)) && parseInt(value, 10) == parseFloat(value); }Sollte in den oben genannten Fällen funktionieren.
syserr0r
3
VERWENDEN SIE DIESEN ALGORITHMUS NICHT! Das wird es dir sagen isInt('5a') == true!
Machineghost
1
Ich habe fast die gleiche Methode angewendet und einen Test für die toStringMethode sowohl des ursprünglichen als auch des transformierten Werts hinzugefügt :var isint = function (a) { return ((parseInt(a) === parseFloat(a)) && (a.toString() === parseInt(a).toString())); }
Ghislain Leveque
13

benutze isNaN (n)

dh

if(isNaN(intValue))

anstelle von

if (intValue == Number.NaN)
Jumipo
quelle
1
isNaN () bedeutet, ist keine Zahl und gibt false zurück, wenn es sich um eine Zahl handelt. Habe mich gerade verwirrt :)
Broschüre
4

Ich habe dies getan, um nach Zahl und ganzzahligem Wert zu suchen

if(isNaN(field_value * 1) || (field_value % 1) != 0 ) not integer;
else integer;

Modulare Abteilung

Beispiel
1. 25,5% 1! = 0 und
2. 25% 1 == 0

Und wenn (field_value * 1) NaN wenn Zeichenfolge zB: 25,34 oder abcd etc ... sonst Ganzzahl oder Zahl

Kshitiz
quelle
2

Funktion isInt (x) {return Math.floor (x) === x;}

Kariudo
quelle
1

Wenn Ihre Nummer im 32-Bit-Ganzzahlbereich liegt, können Sie Folgendes wählen:

function isInt(x) { return ""+(x|0)==""+x; }

Der bitweise oder Operator erzwingt die Konvertierung in vorzeichenbehaftete 32-Bit-Int. Die Zeichenfolgenkonvertierung auf beiden Seiten stellt sicher, dass true / false übereinstimmen möchten.

Vajk Hermecz
quelle
1

Niemand hat diese einfache Sache versucht?

function isInt(value) {
    return value == parseInt(value, 10);
}

Was stimmt damit nicht?

code_assassin
quelle
Während es als Frage formuliert ist, ist dies eine Antwort auf die Frage. Wenn mir nicht etwas Feines fehlt, ist es sogar eine richtige Antwort auf die Frage.
Foon
parseInt ('5HowdyDoody0', 10) gibt 5 zurück. Dies macht es für die Validierung ungeeignet.
David Wendelken
0

Sie dürfen isInteger()Verfahren von NumberObjekt

if ( (new Number(x)).isInteger() ) {
  // handle integer
}

Diese Methode funktioniert einwandfrei, wenn xist undefinedoder null. Aber es hat Unterstützung schlechte Browser jetzt

Sneg
quelle
0

Ich habe festgestellt, dass die NaN-Antworten fehlen, weil sie keine nachgestellten Zeichen erfassen (daher wird "123abc" als gültige Zahl angesehen). Daher habe ich versucht, die Zeichenfolge in eine Ganzzahl und zurück in eine Zeichenfolge zu konvertieren und sicherzustellen, dass sie nach der Konvertierung mit dem Original übereinstimmt ::

if ("" + parseInt(stringVal, 10) == stringVal) { alert("is valid number"); }

Dies funktionierte für mich, bis die Zahlen so groß waren, dass sie während der Konvertierung als wissenschaftliche Notation erschienen.

... das bedeutet natürlich, dass Sie eine Zahl in wissenschaftlicher Notation eingeben können, aber die Überprüfung von Minimal- und Maximalwerten würde dies verhindern, wenn Sie dies wünschen.

Es wird natürlich fehlschlagen, wenn Sie Trennzeichen verwenden (wie "1.000" oder "1.000", abhängig von Ihrem Gebietsschema) - Ziffern sind nur hier zulässig.

Malvineous
quelle
-4
If (enteredAge < "1" || enteredAge > "130") ......

Einfach und es funktioniert ... bis sie Unsterblichkeit entwickeln

Zardiw
quelle
Gehen Sie voran und testen Sie es mit 0xA oder 15.123
Sebastian Nowak
Ja. Ich nehme an, sie können das eingeben. Aber ich denke, es reicht für seine Bedürfnisse. Es funktioniert gut auf meinen Seiten z
Zardiw
2
Ich würde dich ernsthaft nicht einstellen.
Sebastian Nowak