Question

我在表单中实现了一个数字类型输入，指定了min和max：

<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（）函数之前进行测试。

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

感谢您的帮助，

亚历

Answer 1

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

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

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

请参阅here

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

cast min＆amp;最大属性为* 1
检索当前值并将其强制转换为数字（如果不为空）
如果存在NaN值
将背景设置为红色以表示值错误

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

2 个答案: