Überprüfen Sie, ob es sich bei der Eingabe um Zahlen- oder Buchstaben-Javascript handelt


73

Ich verwende Formulare in HTML und Javascript. Ich möchte, dass eine Warnung nur angezeigt wird, wenn der Benutzer einen BRIEF eingibt und klickt submit.

Also habe ich den HTML-Code:

<form name="myForm" action="" onsubmit="return checkInp()" method="post">
    First name: <input type="text" name="age">
<input type="submit" value="Submit">   

Und der Javascript-Code:

function checkInp()
{
var x=document.forms["myForm"]["age"].value;
if (x consists of any letters) // this is the code I need to change
{
alert("Must input numbers");
return false;
}
}

Definieren Sie "Brief". Ist "é" ein Brief? Was ist mit "α"? Wenn Sie Ascii-Buchstaben von A bis Z und von A bis Z meinen, sagen Sie dies bitte.
Jukka K. Korpela

1
Möglicherweise möchten Sie auch den HTML-Code ändern. Wechseln Sie <input type="text" />zu <input type="number" min="0" max="125" step="1" />. In modernen Browsern wird nach einer numerischen Eingabe ohne JS gesucht.
Fboes

Antworten:


117

Mit der Funktion isNaN können Sie feststellen, ob ein Wert nicht in eine Zahl konvertiert wird. Beispiel wie folgt:

function checkInp()
{
  var x=document.forms["myForm"]["age"].value;
  if (isNaN(x)) 
  {
    alert("Must input numbers");
    return false;
  }
}

20
isNaN('') === false;Passen Sie die leere Zeichenfolge auf: #jsrage
KFunk

12
Tun Sie dies nicht, Zeichenfolgen wie '0xFF' und '2e32' durchlaufen diese Validierung.
Matt McClellan

4
Sie können dies nicht verwenden, um nach Zahlen zu suchen. Es schlägt fehl, wenn ein Alphabet der Zahl folgt. Versuchen Sie dies "3a".
Nidhin David

3
Und die verrückteste Tatsache ist NANauch eine Zahl :(
Abhijith AC


41

Verwenden Sie den regulären Ausdruck , um nur Buchstaben zuzuordnen. Es ist auch gut, Kenntnisse darüber zu haben, ob Sie jemals etwas Komplizierteres tun müssen, z. B. sicherstellen, dass es sich um eine bestimmte Anzahl von Zahlen handelt.

function checkInp()
{
    var x=document.forms["myForm"]["age"].value;
    var regex=/^[a-zA-Z]+$/;
    if (!x.match(regex))
    {
        alert("Must input string");
        return false;
    }
}

Noch besser wäre es, alles andere als Zahlen zu leugnen:

function checkInp()
{
    var x=document.forms["myForm"]["age"].value;
    var regex=/^[0-9]+$/;
    if (x.match(regex))
    {
        alert("Must input numbers");
        return false;
    }
}

14
Vermissen Sie ein !Vorher x.match(regex)in Ihrem zweiten Code-Snippet?
Eingereicht

2
Dies ist die sauberste Lösung
Faris Rayhan

Oder meinst du regex.test(x)?
Sonson Ixon

12

Sie können die isNaN- Funktion verwenden. Es gibt true zurück, wenn die Daten keine Zahl sind. Das wäre so etwas:

function checkInp()
{
    var x=document.forms["myForm"]["age"].value;
    if (isNaN(x)) // this is the code I need to change
    {
        alert("Must input numbers");
        return false;
    }
}

Hinweis: isNan betrachtet 10.2 als gültige Nummer.


1
* isNaN -yes, das kann ein Problem sein, gibt es irgendwelche Möglichkeiten, nur ganze Zahlen einzugeben? Danke für die Antwort.
Greg Peckory

1
Verwenden Sie nur für ganze Zahlen Regex und sehen Sie sich meine Antwort an.
Kim Kling

6

Finden Sie einfach den Rest durch Teilen durch 1, dh x% 1. Wenn der Rest 0 ist, bedeutet dies, dass x eine ganze Zahl ist. Andernfalls müssen Sie die Meldung "Zahlen müssen eingegeben werden" anzeigen. Dies funktioniert auch bei Zeichenfolgen, Dezimalzahlen usw.

function checkInp()
{
    var x = document.forms["myForm"]["age"].value;
    if ((x%1) != 0) 
    {
        alert("Must input numbers");
        return false;
    }
}

5

Sie können isNaN () verwenden. Es gibt true zurück, wenn die Daten keine Zahl sind.

var data = 'hello there';
if(isNaN(data)){
  alert("it is not number");
}else {
  alert("its a valid number");
}

isNaN (true) gibt false zurück
Memet Olsen

5

Ich weiß, dass dieser Beitrag alt ist, aber es war der erste, der auftauchte, als ich eine Suche durchführte. Ich habe @Kim Kling RegExp ausprobiert, aber es ist kläglich gescheitert. Auch bevor ich dieses Forum gefunden habe, habe ich fast alle anderen hier aufgeführten Variationen ausprobiert. Am Ende funktionierte keiner von ihnen außer dem, den ich geschaffen hatte; es funktioniert gut und es ist es6:

    const regex = new RegExp(/[^0-9]/, 'g');
    const x = document.forms["myForm"]["age"].value;

    if (x.match(regex)) {
       alert("Must be a valid number");
       return;
    }
   

4

Versuche dies:

if(parseInt("0"+x, 10) > 0){/* x is integer */}

2
oder einfachif ( (x >> 0) > 0 )
Prasanth

Hat auch großartig funktioniert, außer dass es immer noch ein Problem mit den Dezimalzahlen gibt. Vielen Dank für die Antwort.
Greg Peckory

3
Könnt ihr euch im Detail erklären, wie es funktioniert? Was bedeutet >>Operator? Vielen Dank im Voraus
Sospedra

Leider gibt es 32 für "32!" anstelle eines Fehlers.
Martin Jambon

3

Ein besserer (fehlerfreier) Code wäre wie folgt:

function isReallyNumber(data) {
    return typeof data === 'number' && !isNaN(data);
}

Dies behandelt auch leere Zeichenfolgen. Ein weiterer Grund, der isNaN("12")gleich ist, falseaber "12"eine Zeichenfolge und keine Zahl ist, sollte sich ergeben true. Zum Schluss noch ein Bonuslink, der Sie interessieren könnte.



3

Ich denke, am einfachsten wäre es, ein NumberObjekt mit der Zeichenfolge zu erstellen und mit Hilfe der isIntegervon der NumberKlasse selbst bereitgestellten Funktion zu überprüfen, ob dies der Fall ist .

Number.isInteger(Number('1')) //true
Number.isInteger(Number('1 mango')) //false
Number.isInteger(Number(1)) //true
Number.isInteger(Number(1.9)) //false

Vorsicht Nummer (''); // 0
Sarath

2

function isNumber(data){
    data = data +"e1";                      // Disallow eng. notation "10e2"+"e1" is NaN
    var clean = parseFloat(data,10) / data ; // 1 if parsed cleanly
    return ( data==0 || clean && (data/data) === 1.0);  // Checks for NaN
}

function isInteger(data){
    data = data +"e1";                      // Disallow eng. notation "10e2"+"e1" is NaN
    var clean = parseInt(data,10) / data ; // 1 if parsed cleanly
    return (data==0 ||clean && (data%1) === 0);          // Checks For integer and NaN
}

//Expected pass
console.log(isNumber("0"))
console.log(isNumber("-0.0"))
console.log(isNumber("+0.0"))
console.log(isNumber(0))
console.log(isNumber(-0.0))
console.log(isNumber(+0.0))
console.log(isNumber(1))
console.log(isNumber(-10.0))
console.log(isNumber(+1000.000001))
console.log(isNumber(1))
console.log(isNumber(-10.0))
console.log(isNumber(+1000.000001))

//Expected fail
console.log(isNumber("FF"))
console.log(isNumber("1e1"))
console.log(isNumber("seven"))


Vielleicht sollten wir parseInt für isInteger verwenden. und x ist undefiniert. Ich denke, seine Daten.
Cijo

0 ist NaN, technisch korrekt, aber wahrscheinlich nicht funktional korrekt
RAC

@RAC, danke für den Kommentar, du bist zu nett. Das ist nicht einmal technisch korrekt, ich hänge meinen Kopf in Schande :-)
Visibleman

0

Der beste und modernste Weg ist typeof (variabel), wenn Sie sich für reelle Zahlen interessieren, nicht für Zahlen aus Zeichenfolgen. Zum Beispiel:

var a = 1;
var b = '1';

typeof a: // Output: "number"
typeof b: // Output: "string

0

Danke, ich habe heute die Antwort @ str8up7od verwendet, um eine Funktion zu erstellen, die auch prüft, ob die Eingabe leer ist:

    function is_number(input) {
        if(input === '')
            return false;
        let regex = new RegExp(/[^0-9]/, 'g');
        return (input.match(regex) === null);
    }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.