输入类型=数字的Jquery更改函数错误检查表单

Question

我正在实现一个计时器，并试图弄清楚如何错误检查我的表单中的输入框是否有任何随机字符串或非数字的字符。放入一个字符或字符串似乎没有触发change（）函数，我猜它是因为我的html中有type="number"。我犹豫是否要将其更改为type = "text"，因为我喜欢type="number"输入框附带的微调器上下箭头。

是否有一种简单的方法可以同时检查所有四个输入框，而不是对所有四个框都有“else”语句？我认为必须有一种优雅的方式来做到这一点。我刚开始使用JavaScript，所以任何帮助都会受到赞赏。谢谢:)）

JS：

$(function(){
    $("#sec").change(function(){
        secs = parseInt( $("#sec").val() || -1);
        mins = parseInt( $("#min").val() || -1);
        hours = parseInt( $("#hour").val() || -1);
        days = parseInt( $("#day").val() || -1);

        console.log("secs is " + secs);
        if($("#sec").val() >= 60){
            var newSecs = secs % 60;
            var newMins =  mins + Math.floor(secs/60);//can be > 60
            var newHours = hours + Math.floor(mins/60);
            var newDays = days + Math.floor(hours/24);

            $("#sec").val(newSecs);
            $("#min").val(newMins);
            $("#hour").val(newHours);
            $("#day").val(newDays);
        }

        else if(secs < 0 || !(typeof $("#sec").val() === 'number' && (secs % 1) === 0)){
            alert("Please enter a valid time interval");
            $(this).val("");
            return;
        }
    });
});

//minutes was changed
$(function(){
    $("#min").change(function(){
        mins = parseInt( $("#min").val() || -1);
        hours = parseInt( $("#hour").val() || -1);
        days = parseInt( $("#day").val() || -1);


        console.log("mins is " + mins);
        if($("#min").val() >= 60){
            var newMins = mins % 60//can be > 60
            var newHours = hours + Math.floor(mins/60);
            var newDays = days + Math.floor(hours/24);

            $("#min").val(newMins);
            $("#hour").val(newHours);
            $("#day").val(newDays);
        }

        else if(mins < 0 || !(typeof $("#min").val() === 'number' && (mins % 1) === 0)){
            alert("Please enter a valid time interval");
            $(this).val("");
            return;
        }
    });
});

//hours was changed
$(function(){
    $("#hour").change(function(){
        hours = parseInt( $("#hour").val() || -1);
        days = parseInt( $("#day").val() || -1);

        console.log("hours is " + hours);
        if($("#hour").val() >= 24){
            var newHours = hours % 24;
            var newDays = days + Math.floor(hours/24);

            $("#hour").val(newHours);
            $("#day").val(newDays);
        }

        else if(hours < 0 || !(typeof $("#hour").val() === 'number' && (hours % 1) === 0)){
            alert("Please enter a valid time interval");
            $(this).val("");
            return;
        }
    });
});

HTML：

<form class="form-inline" id="input">

        <div class="form-group col-xs-2">
            <input id="day" class="form-control input-sm input" type="number" value="" placeholder="Days">
        </div>
        <div class="form-group col-xs-2">
            <input id="hour" class="form-control input-sm input" type="number" value=""  placeholder="Hours">
        </div>
        <div class="form-group col-xs-2">
            <input id="min" class="form-control input-sm input" type="number" value=""  placeholder="Minutes">
        </div>
        <div class="form-group col-xs-2">
            <input id="sec" class="form-control input-sm input" type="number" value="" placeholder="Seconds">
        </div>
    </form>