【问题标题】:JavaScript - Test for an integerJavaScript - 测试整数
【发布时间】:2010-11-04 09:45:34
【问题描述】:

我有一个允许用户输入年龄的文本字段。我正在尝试使用 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。如何确保用户只输入一个整数?

谢谢

【问题讨论】:

  • 只是一个相关说明,您应该始终使用两个参数调用 parseInt() - 值和基数(基数)。否则 parseInt() 将尝试猜测您输入的基数。
  • 如果用户输入“1.1”,是要验证失败,还是强制输入“1”?
  • 那么,“1.0”是一个整数吗?
  • MDN 提到:使用Number.isNaN()isNaN() 最清楚地确定一个值是否为NaN

标签: javascript


【解决方案1】:
var intRegex = /^\d+$/;
if(intRegex.test(someNumber)) {
   alert('I am an int');
   ...
}

如果用户输入的不是非负整数,那肯定会失败。

【讨论】:

  • 如果用户输入负整数也会失败。
  • (当然,年龄不是负数,但您应该具体说明您是在测试任何整数还是任何非负整数。)
  • 具有一个整数元素的数组也返回 true ( intRegex.test( [42]) )
  • 对于未来的访问者,这个答案正在this question 中解释。
  • 修复正则表达式以使用负数不是问题。 var intRegex = /^-?\d+$/;
【解决方案2】:

对于真正的 int 检查,使用这个:

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

许多 int 检查的问题是它们为 1.0 返回“false”,这是一个有效的整数。该方法检查以确保 float 和 int 解析的值相等,因此对于 #.00 它将返回 true。

更新:

在 cmets 中已经讨论了两个问题,我将添加到未来读者的答案中:

  • 首先,在解析使用逗号表示小数位的字符串值时,此方法不起作用。 (不足为奇,怎么可能?例如,在美国给定“1,001”,它是一个整数,而在德国却不是。)
  • 其次,自编写此答案以来,parseFloat 和 parseInt 的行为在某些浏览器中发生了变化,并且因浏览器而异。 ParseInt 更具侵略性,会丢弃出现在字符串中的字母。这非常适合获取号码,但不适合验证。

我的建议和实践是使用像 Globalize.js 这样的库来解析 UI 而不是浏览器实现的数值,并且只对已知的“以编程方式”提供的值使用本机调用,例如从XML 文档。

【讨论】:

  • @Cesar,据我所知,没有将 1,2 视为整数或任何单个数值的编程语言。
  • @ThaMe90 没错,但就我而言,我使用的是 isInt 函数来验证外部输入。在逗号用作小数分隔符的某些国家/地区,“1,2”是一个有效数字。见:en.wikipedia.org/wiki/File:DecimalSeparator.svg
  • function isInt(value) { return !isNaN(parseInt(value, 10)) &amp;&amp; parseInt(value, 10) == parseFloat(value); } 应该在上述情况下工作。
  • 不要使用这个算法!它会告诉你isInt('5a') == true!
  • 我使用了几乎相同的方法,在 toString 方法上添加了原始值和转换值的测试:var isint = function (a) { return ((parseInt(a) === parseFloat(a)) &amp;&amp; (a.toString() === parseInt(a).toString())); }
【解决方案3】:

使用 isNaN(n)

if(isNaN(intValue))

代替

if (intValue == Number.NaN)

【讨论】:

  • isNaN() 表示不是数字,如果是数字则返回 false。只是让我感到困惑:)
【解决方案4】:

更新

我已经修复了有错误的代码并添加了一个名为 key 的 var 来存储使用 keyCodewhich 的按键代码,这取决于浏览器。

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

感谢唐纳德.麦克莱恩 :)


如果您想在输入时检查您是否正在输入数字(并避免在输入字段中输入其他字符),您可以使用这个简单的功能,您可以定义允许的元素(这包括您想要过滤的任何内容)。通过这种方式,您不仅可以选择整数,还可以选择例如某组字符。该示例基于 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 这些天变得越来越强大。这是您可以在 Web 应用程序的任何字段中创建的指令:

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 并且你只需要在一定数量的字段中应用这个指令会发生什么。好吧,您可以将上面的指令转换为准备接受 truefalse 值的指令,以便能够决定哪个字段将受到它的影响。

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">

希望对你有所帮助。

【讨论】:

【解决方案5】:

我这样做是为了检查数字和整数值

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

模块化划分

例子
1. 25.5 % 1 != 0 和,
2. 25 % 1 == 0

并且 if(field_value * 1) NaN if string eg: 25,34 or abcd etc ... else 整数或数字

【讨论】:

    【解决方案6】:

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

    【讨论】:

      【解决方案7】:

      如果您的号码在 32 位整数范围内,您可以使用以下内容:

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

      按位或运算符强制转换为带符号的 32 位 int。 两边的字符串转换保证了真假想匹配。

      【讨论】:

        【解决方案8】:

        没有人尝试过这么简单的事情吗?

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

        这有什么问题?

        【讨论】:

        • 虽然它被表述为一个问题,但这是对这个问题的回答。除非我遗漏了一些微妙之处,否则它甚至是问题的正确答案。
        • parseInt('5HowdyDoody0',10) 返回 5。这使得它不适合验证。
        【解决方案9】:

        你可以使用Number对象的isInteger()方法

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

        如果xundefinednull,此方法可以正常工作。但它现在有poor browser support

        【讨论】:

          【解决方案10】:

          我发现缺少 NaN 响应,因为它们不接收尾随字符(因此“123abc”被认为是有效数字)所以我尝试将字符串转换为整数并返回字符串,并确保它匹配转换后的原件:

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

          这对我有用,直到数字如此之大,在转换过程中它们开始以科学记数法出现。

          ...当然,这意味着您可以输入科学计数法的数字,但如果您愿意,也可以检查最小值和最大值。

          如果您使用分隔符(例如“1,000”或“1.000”,具体取决于您的语言环境),它当然会失败 - 此处只允许使用数字。

          【讨论】:

            【解决方案11】:
            If (enteredAge < "1" || enteredAge > "130") ......
            

            简单而有效....直到他们长生不老

            【讨论】:

            • 继续用 0xA 或 15.123 测试它
            • 是的。我想他们可以进入那个。但我认为这足以满足他的需要。它在我的页面上运行良好 z
            • 我真的不会雇用你。
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2017-03-05
            相关资源
            最近更新 更多