如何使用javascript检查数字类型输入的有效性？答案

【问题标题】：How to check the validity of a number type input sing javascript?如何使用javascript检查数字类型输入的有效性？
【发布时间】：2014-10-08 09:38:36
【问题描述】：

我已经实现了一个数字类型的输入，指定了最小值和最大值：

<input class="qty_input" name="quantit" type="number" value="5" min="1" max="50" maxlength="2" style="width:4em;"></input>

输入类型数字有效：如果输入了其他数字，或者数字值不在指定范围内，则输入变为红色。

我有一个 javascript 函数，可以在输入更改时提交表单。

<script type="text/javascript">
(function($) {

  function doAjax() {
    $.ajax({
        url : "blabla",
        type: "POST",
        data : $("#form-configurator").serializeArray(),
        dataType: 'json',
        success: function(data)
        {
            console.log(data);
        },
        error: function ()
        {

        }
    });
  }
$('input[type=number]').change(function() {

    // test Validity

    doAjax();
  });
})(jQuery);
</script>

我想在运行 doAjax() 函数之前测试输入的数字是否有效。

有没有一种简单的方法可以做到这一点，比如测试数字类型输入的“有效”参数？（它应该存在，因为输入本身执行一些测试......）

感谢您的帮助，

亚历克斯

【问题讨论】：

isNaN() 派上用场检查它的号码与否
你能评价答案吗？

标签： javascript validation input

【解决方案1】：

您可以使用isNaN() 函数来验证输入是否为数字。您可以添加另一个 if 条件，例如

if(isNaN(value) || value <1 || value > 50)
 return ;
else 
    your logic

如果该值不是数字，则返回true。如果是数字，则返回false。

见here

【讨论】：

这会起作用，但如果验证规则不在 HTML 和 JS 中重复会更好。
@AdamHarwood 立即查看
就是这个想法。使用 type=number 时，html 已经执行了 isNaN 和 min/max 检查。没有办法在JS中检查这个测试的结果，而不是第二次做所有的测试？
这仍然没有解决Alexglvr提出的问题。然而，HTML5 可能根本没有提供这样做的“好”方式。
然后我在 JS 中重新进行测试……使用混合的 2 种解决方案。有用。再次感谢。

【解决方案2】：

这里有一个现场样本：http://jsfiddle.net/zueku6mo/

$('input[type=number]').change(function() {
    var min = $(this).attr("min") * 1;
    var max = $(this).attr("max") * 1;
    var val = $(this).val().length ? $(this).val() * 1 : NaN;
    // test Validity
    if (val >= min && val <= max) {
       $(this).css("background-color", "white");
       doAjax();
    } else {
       $(this).css("background-color", "red"); 
    }
});

使用* 1 将最小和最大属性转换为数字
如果不为空，则检索当前值并将其转换为数字
如果有 NaN 值，则做一些失败的数学运算
将背景设置为红色以表示值错误

【讨论】：

【解决方案3】：

这可以在不通过checkValidity()复制验证规则的情况下完成：

$('input[type=number]').change(function() {
    if ($('input[type=number]')[0].checkValidity()) {
        doAjax();
    }
});

【讨论】：