Question

我有一个脚本在提交时循环遍历class="validate"的所有元素，如果它们为空，则取消提交并更改其背景颜色。任何人都知道我可以在同一个函数中添加第二个验证的方法，以确保class="validate2"的elemnet只是数字（没有单词）？这是我的剧本：

<script type="text/javascript" >
window.onload = function() {
document.getElementById("formID").onsubmit = function() {
    var fields = this.getElementsByClassName("validate"),
        sendForm = true,
        flag=false;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ffb8b8";
            flag=true;

            sendForm = false;
            window.scrollTo(0,0);
        }
        else {
            fields[i].style.backgroundColor = "#fff";
        }
    }
if(!sendForm) {
  return false;
}
</script>

Answer 1

替换：

if(!fields[i].value)

与

if(+fields[i].value || +fields[i].value === 0)

在你的第二次验证中。基本上将值转换为数字。如果有效则继续。

var fields = this.getElementsByClassName("validate"),
    fields2 = this.getElementsByClassName("validate2"), 
    sendForm = true,
    flag=false;
for(var i = 0; i < fields.length; i++) {
    if(!fields[i].value) {
        fields[i].style.backgroundColor = "#ffb8b8";
        flag=true;

        sendForm = false;
        window.scrollTo(0,0);
    }
    else {
        fields[i].style.backgroundColor = "#fff";
    }
}
for(var i = 0; i < fields2.length; i++) {
    if(+fields2[i].value && +fields2[i].value === 0) {
        fields2[i].style.backgroundColor = "#ffb8b8";
        flag=true;

        sendForm = false;
        window.scrollTo(0,0);
    }
    else {
        fields2[i].style.backgroundColor = "#fff";
    }
}

if(!sendForm) {
    return false;
}

Answer 2

尝试这种方式：

<script type="text/javascript" >
window.onload = function() {
document.getElementById("formID").onsubmit = function() {
    var fields = this.elements;
    sendForm = true;
    var flag=false;

    for(var i = 0; i < fields.length; i++) {
        if (fields[i].className == 'validate' || fields[i].className == 'validate2') {
            alert(fields[i].className);
            if (fields[i].value.length == 0) {
                fields[i].style.backgroundColor = "#ffb8b8";
                flag=true;
                sendForm = false;
                window.scrollTo(0,0);
            }
            else if (fields[i].className == 'validate2' && isNaN(Number(fields[i].value))) {
                fields[i].style.backgroundColor = "#ffb8b8";
                flag=true;
                sendForm = false;
                window.scrollTo(0,0);
            }
            else {
                fields[i].style.backgroundColor = "#fff";
            }
        }
    }

    if(!sendForm) {
        return false;
    }
}

}

Answer 3

基本上与使用“validate2”类的元素再次使用类“validate”的元素一样，但检查值是否为数字（由正则表达式完成）。注意 - 如果您有两个类的字段，则可能需要添加更多逻辑。

var fields = this.getElementsByClassName("validate"),
    numfields = this.getElementsByClassName("validate2"),
    sendForm = true;
var flag=false;
for(var i = 0; i < fields.length; i++) {
    if(!fields[i].value) {
        fields[i].style.backgroundColor = "#ffb8b8";
        flag=true;
        sendForm = false;
        window.scrollTo(0,0);
    }
    else {
         fields[i].style.backgroundColor = "#fff";
    }
}
for(var i = 0; i < numfieldsfields.length; i++) {
    if((numfields[i].value.search(/^\s*\d+\s*$/) != -1) {
        numfields[i].style.backgroundColor = "#ffb8b8";
        flag=true;
        sendForm = false;
        window.scrollTo(0,0);
    }
    else {
         numfields[i].style.backgroundColor = "#fff";
    }
}

if(!sendForm) {
    return false;
}

Answer 4

这可能有效 -

window.onload = function() {
    document.getElementById("formID").onsubmit = function() {
        var fields = this.getElementsByClassName("validate"),
            sendForm = true,
            flag = false;
        for (var i = 0; i < fields.length; i++) {
            if (!fields[i].value) {
                fields[i].style.backgroundColor = "#ffb8b8";
                flag = true;

                sendForm = false;
                window.scrollTo(0, 0);
            }
            else {
                fields[i].style.backgroundColor = "#fff";
            }
            if (hasClass(fields[i], "numeric")) {
                if (!isInteger(fields[i].value)) {
                    fields[i].style.backgroundColor = "#ffb8b8";
                    flag = true;

                    sendForm = false;
                    window.scrollTo(0, 0);
                }


                if (!sendForm) {
                    return false;
                }
            }
        }
    }
}

var isInteger_re = /^\s*(\+|-)?\d+\s*$/;

function isInteger(s) {
    return String(s).search(isInteger_re) != -1
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

它没什么太花哨的，它只是检查元素是否具有类“numeric”然后在它上面运行一个正则表达式来查看它是否是一个整数。魔术发生在这里......

var isInteger_re = /^\s*(\+|-)?\d+\s*$/;

    function isInteger(s) {
        return String(s).search(isInteger_re) != -1
    }

    function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }

所以输入以下内容应该被拿起......

<input type='text' class='required numeric' />

在我看来，值得采用某种框架或插件来避免在这里重新发明轮子。我敢肯定，为此目的，有大量可行的轻量级候选人。就个人而言，我使用jQuery，因此使用bassistance validation是明智的，我可以使用QUITE可扩展且非常容易使用。

干杯！

-Derek

仅为整数添加验证？

4 个答案: