javascript - 如何在旧浏览器中验证 input[type="number"]？

Question

我喜欢 HTML5 约束验证，因为它提供了定义的标准语法来指定应该如何允许输入以及不应该如何输入，并防止跨项目的不同实现。

然而，最大的问题是许多人仍然使用旧的浏览器，例如 IE8，因为许多人仍然使用 Windows XP，而 IE8 是他们自动获得的最后一个更新。

如何通过 javascript 验证这种类型的输入并继续使用 HTML5 语法？

Answer 1

当Webshims等浏览器不支持时，您可以使用 polyfill 添加对 input[type="number"] 的支持。

如果你只想验证它们，我做了这个功能（它应该支持数字的所有约束属性），它对我来说很好，但欢迎你指出我犯的任何错误：

function validateNumbers(){
    var returner = true;
    $(this).find('input[type="number"]').each(function(i){
        var valor = $(this).val();
        var max = $(this).attr("max");
        var min = $(this).attr("min");
        var step = $(this).attr("step");
        var decimals = 0;
        if(typeof step == 'undefined'){
            step = "1";
        }
        if(typeof valor != 'undefined' && typeof valor.split(".")[1] != 'undefined' && typeof step.split(".")[1] != 'undefined') {
            decimals = (valor.split(".")[1].length>step.split(".")[1].length)?valor.split(".")[1].length:step.split(".")[1].length;
        } else if((typeof valor == 'undefined'||typeof valor.split(".")[1] == 'undefined') && typeof step.split(".")[1] != 'undefined'){
            decimals = step.split(".")[1].length;
        } else if((typeof step.split(".")[1] == 'undefined') && typeof valor != 'undefined' && typeof valor.split(".")[1] != 'undefined'){
            decimals = valor.split(".")[1].length;
        }
        var multiplier = "1";
        for (var i=0;i<decimals;i++){
            multiplier += "0";
        }
        valor = valor*multiplier;
        max = max*multiplier;
        min = min*multiplier;
        step = step*multiplier;
        if(isNaN(valor)||(!isNaN(max)&&valor>max)||(!isNaN(min)&&valor<min)||(!isNaN(step)&&(valor-(isNaN(min)?0:min))%step!=0)){
            //$(this).parent().addClass("error"); or however you show errors
            returner = false;
        }
    });
    return returner;
}