JavaScript - walidacja, tylko liczby

Istnieje wiele sytuacji umożliwiających wprowadzenie tylko liczb lub alfabetów, lub oba są dopuszczalne w polach formularza, w zależności od wymagań. W tym celu sprawdź pola zgodnie z wymogiem za pomocą sprawdzania poprawności JavaScript. Zapewnia, że ​​dane wejściowe użytkownika są prawidłowe, kompletne i zgodnie z potrzebą, czy nie przed przesłaniem go do serwera.

Ten post zdefiniuje podejścia do potwierdzenia pól formularza w celu wprowadzenia tylko liczb.

Walidacja JavaScript w celu wprowadzenia tylko liczb

Aby potwierdzić pola w celu wprowadzenia tylko liczb, skorzystaj z podejmowanych poniżej podejść:

• Za pomocą Regex
• Za pomocą metody isnan ()

Metoda 1: Liczby sprawdzania poprawności tylko za pomocą wyrażenia regularnego

Użyj "regularny wyrażenie”Lub„Regex wzór„Aby potwierdzić pola formularza, aby wprowadzić tylko liczby. Aby sprawdzić dane wejściowe użytkownika, użyj „mecz()”Metoda z wyrabianką, która pasuje do wejścia do dostarczonego wzoru Regex.

Przykład

W pliku HTML użyj następującego kodu, aby utworzyć formularz:

Wprowadź swój numer PIN: autoComplete = "off">

Zgodnie z powyższym fragmentem kodu:

• Po pierwsze, utwórz formularz zawierający pole wejściowe, które akceptuje jedynie liczbę jako „Szpilka Numer".
• Następnie utwórz miejsce dla wiadomości drukowania, jeśli wejście jest nieprawidłowe lub poprawne za pomocą

  etykietka.

• Stwórz "składać”Przycisk, który wywołuje„numberValidationFunc ()”Na przycisku kliknij, aby zweryfikować pola formularza.

Użyj następującego kodu w „„Tag lub plik JavaScript:

funkcja numerValidationFunc ()

var input = dokument.getElementById („Pinnumber”).wartość;
var wzór = /^[0-9]+$ /;
if (wejście.dopasowanie (wzór))

dokument.getElementById („błąd”).innerHtml = „Great”;
zwrócić true;

w przeciwnym razie

dokument.getElementById („błąd”).innerHtml = "Wprowadź wartość numeryczną";
zwrócić fałsz;

Tutaj, w powyższym fragmencie:

• Najpierw zdefiniuj funkcję o nazwie „numberValidationFunc ()„To zostanie wywołane na przycisku.
• Uzyskaj wartość wejściową za pomocą „wartość" atrybut.
• Utwórz wzór regex przechowywany w zmiennej ”wzór".
• Następnie sprawdź, czy wejście pasuje do wzoru za pomocą „mecz()" metoda.
• Jeśli wejście pasuje do wzoru, wydrukuj wiadomość „Świetnie”W przeciwnym razie wyświetl komunikat o błędzie„Wprowadź wartość numeryczną".

Jak widać, dane wyjściowe akceptuje tylko liczby podczas wprowadzania liczb z alfabetami jest niedopuszczalne i pokazuje komunikat o błędzie:

Metoda 2: Liczby sprawdzania poprawności za pomocą metody isnan ()

Możesz także użyć „isnan ()„Metoda walidacji pól do wprowadzenia tylko liczb. Wejścia przyjmuje jako argument i sprawdza, czy dane wejściowe jest liczbą, którą daje „PRAWDA„W przeciwnym razie daje”FAŁSZ".

Przykład

Zdefiniuj funkcję „numberValidationFunc ()„To wywoła wydarzenie OnClick przycisku Prześlij, aby sprawdzić, czy dane wejściowe jest numerem, czy nie używa„isnan ()" metoda:

funkcja numerValidationFunc ()

var input = dokument.getElementById („Pinnumber”).wartość;
if (isnan (wejście))

dokument.getElementById („błąd”).innerHtml = "Wprowadź wartość numeryczną";
zwrócić fałsz;

w przeciwnym razie

dokument.getElementById („błąd”).innerHtml = „Great”;
zwrócić true;

Wyjście

Chodzi o walidację liczb tylko w JavaScript.

Wniosek

Aby potwierdzić pola tekstowe formularza tylko dla wartości liczbowych, użyj „Wyrażenie regularne”Jako wzory do wyrabiania lub„ ”isnan ()" metoda. Oba podejścia są najlepsze do walidacji tylko liczb i możesz wybrać/wybrać dowolny zgodnie z pragnieniem. W tym poście zdefiniowano podejścia do potwierdzenia pól formularza do wprowadzenia tylko liczb.