JavaScript - Перевірте ціле число


77

У мене є текстове поле, яке дозволяє користувачеві ввести свій вік. Я намагаюся виконати певну перевірку на стороні клієнта в цьому полі за допомогою JavaScript. У мене вже є перевірка на стороні сервера. Однак я не можу перевірити, чи вводить користувач фактичне ціле число. На даний момент я пробую такий код:

    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;
    }

Дивно те, що я ввів окремі символи в текстове поле, як "b", і цей метод повертає true. Як я можу переконатися, що користувач вводить лише ціле число?

Дякую


4
Просто пов'язана примітка, ви завжди повинні викликати parseInt () з двома параметрами - значенням і радіусом (базою). В іншому випадку parseInt () спробує вгадати основу вашого введення.
waxwing

1
Якщо користувач вводить "1.1", ви хочете, щоб не вдалося перевірити, або вас примусили "1"?
Носредна

1
І з цього приводу, чи є "1.0" цілим числом?
Носредна

MDN згадує: Використовуйте Number.isNaN()або, isNaN()щоб найбільш чітко визначити, чи є значення NaN.
Торстен Ремер

Відповіді:


8

ОНОВЛЕННЯ

Я виправив код, який мав помилку, і додав var, який називається key, для зберігання натиснутого коду за допомогою keyCode, і який залежить від браузера.

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

Дякую Дональде.McLean :)


Якщо ви хочете перевірити, чи пишете ви цифри під час набору тексту (і уникайте введення інших символів у поле введення), ви можете скористатися цією простою функцією та визначити дозволені елементи (сюди входить те, що ви хочете відфільтрувати). Таким чином ви можете вибрати не тільки цілі числа, але, наприклад, певну групу символів. Приклад заснований на jQuery, щоб приєднати його до поля введення.

$('#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;
    }
});

Якщо ви використовуєте інший ключ, ніж визначений, він не з'явиться в полі. І тому, що в наші дні Angular.js стає сильнішим. це директива, яку ви можете створити, щоб зробити це в будь-якому полі веб-програми:

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;
            }
        });
    }
});

Але що станеться, якщо ви хочете використовувати ng-repeatі вам потрібно застосовувати цю директиву лише в певній кількості полів. Ну, ви можете перетворити верхню директиву на таку, яка готова визнати справжнє чи хибне значення, щоб мати можливість вирішити, яке поле це буде впливати.

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;
                    }
                });
            }
        }
    }
});

Щоб використовувати цю нову директиву, вам просто потрібно зробити це в тексті типу введення, наприклад, наприклад, наприклад:

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

Сподіваюся, це допоможе вам.


Дякую Donald.McLean, але це не для клавіш, а для браузера: keyCode і спостерігайте, як я знайшов тут ( stackoverflow.com/questions/4471582/javascript-keycode-vs-which ), залежить від браузера.
Тімбергус

131
var intRegex = /^\d+$/;
if(intRegex.test(someNumber)) {
   alert('I am an int');
   ...
}

Це абсолютно, позитивно не вдасться, якщо користувач введе щось інше, ніж невід’ємне ціле число.


7
Це також не вдається, якщо користувач вводить від’ємне ціле число.
Джейсон С

3
(звичайно, вік не є негативним, але ви повинні точно визначити, чи тестуєте ви на ціле чи будь-яке ціле невід’ємне число.)
Джейсон С

4
Масив з одним цілочисельним елементом також повертає true (intRegex.test ([42]))
Marius Olsthoorn

2
Для майбутніх відвідувачів ця відповідь пояснюється у цьому питанні .
gdoron підтримує Моніку

Не проблема виправити регулярний вираз для роботи з від’ємними числами. var intRegex = /^-?\d+$/;
Нікола Радосавлевич

31

Для реальної перевірки int використовуйте це:

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

Проблема багатьох перевірок int полягає в тому, що вони повертають значення "false" для 1.0, що є дійсним цілим числом. Цей метод перевіряє, щоб значення аналізу float та int були рівними, тому для # .00 воно поверне true.

ОНОВЛЕННЯ:

Два коментарі обговорювались у коментарях, які я додаю до відповіді для майбутніх читачів:

  • По-перше, при синтаксичному аналізі рядкових значень, які використовують кому для позначення десяткової коми, цей метод не працює. (Не дивно, як це могло? Враховуючи "1001", наприклад, у США це ціле число, тоді як у Німеччині це не так.)
  • По-друге, поведінка parseFloat і parseInt змінилася в певних браузерах, оскільки ця відповідь була написана, і залежить від браузера. ParseInt є більш агресивним і відкидає літери, що з’являються в рядку. Це чудово для отримання номера, але не так добре для перевірки.

Моя рекомендація та практика - використовувати бібліотеку, як Globalize.js, для синтаксичного аналізу числових значень для / з інтерфейсу користувача, а не реалізації браузера, і використовувати власні виклики лише для відомих "програмно" наданих значень, таких як рядок, проаналізований з документа XML .


@Cesar, наскільки мені відомо, не існує мов програмування, які б трактували 1,2 як ціле число або як будь-яке окреме числове значення.
ThaMe90

@ ThaMe90 Це правда, але в моєму випадку я використовував функцію isInt для перевірки зовнішнього вводу. '1,2' - дійсне число в деяких країнах, де кома використовується як десятковий роздільник. Див .: en.wikipedia.org/wiki/File:DecimalSeparator.svg
Цезар Канасса

2
function isInt(value) { return !isNaN(parseInt(value, 10)) && parseInt(value, 10) == parseFloat(value); }Повинна працювати у вищезазначених випадках.
syserr0r

3
НЕ ВИКОРИСТОВУЙТЕ ЦЕЙ АЛГОРИТМ! Це вам скаже isInt('5a') == true!
machineghost

1
Я використав майже той самий метод, додавши тест на toStringметод як початкового значення, так і перетвореного значення:var isint = function (a) { return ((parseInt(a) === parseFloat(a)) && (a.toString() === parseInt(a).toString())); }
Ghislain Leveque

13

використовувати isNaN (n)

тобто

if(isNaN(intValue))

замість

if (intValue == Number.NaN)

1
isNaN () означає, що не є числом, і повертає значення false, якщо це число. Просто заплутав мене :)
брош

4

Я зробив це, щоб перевірити число та ціле значення

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

Модульний підрозділ

Приклад
1. 25,5% 1! = 0 і,
2, 25% 1 == 0

І якщо (field_value * 1) NaN, якщо рядок, наприклад: 25,34 або abcd тощо ... ще ціле число або число



1

Якщо ваш номер знаходиться в 32-бітному цілочисельному діапазоні, ви можете зробити щось на зразок:

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

Побітове або оператор примушує перетворити на підписаний 32-бітний int. Перетворення рядків з обох сторін забезпечує відповідність true / false.


1

Ніхто не пробував цієї простої речі?

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

Що в цьому поганого?


Хоча це сформульовано як запитання, це відповідь на запитання. Якщо немає якоїсь тонкощі, якої я втрачаю, це навіть правильна відповідь на питання.
Фон

parseInt ('5HowdyDoody0', 10) повертає 5. Це робить його непридатним для перевірки.
david wendelken

0

Ви можете використовувати isInteger()метод Numberоб'єкта

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

Цей метод працює належним чином, якщо xє undefinedабо null. Але він має погану підтримку браузера на даний момент


0

Я виявив, що відповідей NaN бракує, оскільки вони не підбирають кінцеві символи (тому "123abc" вважається дійсним числом), тому я спробував перетворити рядок у ціле число і назад у рядок, і переконавшись, що він відповідає оригіналу після перетворення :

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

Це працювало для мене, поки цифри не були настільки великими, що вони почали відображатися як наукові позначення під час перетворення.

... тому, звичайно, це означає, що ви можете ввести число в наукових позначеннях, але перевірка мінімальних і максимальних значень також запобіжить цьому, якщо ви цього забажаєте.

Звичайно, це не вдасться, якщо ви використовуєте роздільники (наприклад, "1000" або "1.000" залежно від вашої локалі) - тут дозволені лише цифри.


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

Просто і це працює .... поки вони не розвинуть безсмертя


Вперед і випробуй його з 0xA або 15.123
Себастьян Новак,

Так. Я гадаю, вони можуть увійти в це. Але я думаю, що цього достатньо для його потреб. Це добре працює на моїх сторінках z
Zardiw

2
Я серйозно не брав би вас на роботу.
Себастьян Новак,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.