Javascript 是否仅为整数添加验证？

我有一个脚本，在提交时使用

class=“validate”

遍历所有元素，如果元素为空，则取消提交并更改其背景色。有人知道我可以在同一个函数中添加第二个验证的方法吗？该方法可以确保带有

class=“validate2”

的元素仅是数字（没有单词）？这是我的剧本：

<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>

window.onload=函数（）{
document.getElementById（“formID”）.onsubmit=function（）{
var fields=this.getElementsByClassName（“验证”），
sendForm=true，
flag=false；
对于（变量i=0；i

更换：

if(!fields[i].value)

与

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

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;
}

var fields=this.getElementsByClassName（“验证”），
fields2=this.GetElementsByCassName（“validate2”），
sendForm=true，
flag=false；
对于（变量i=0；i

尝试以下方法：

<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;
    }
}

window.onload=函数（）{
document.getElementById（“formID”）.onsubmit=function（）{
变量字段=this.elements；
sendForm=true；
var标志=假；
对于（变量i=0；i

}

---

基本上与处理类为“validate”的元素相同，再次处理类为“validate2”的元素，但检查值是否为数字（通过正则表达式完成）。 注意-如果您的字段同时包含这两个类，那么您可能需要添加更多的逻辑

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;
}

var fields=this.getElementsByClassName（“验证”），
numfields=this.getElementsByCassName（“validate2”），
sendForm=true；
var标志=假；
对于（变量i=0；i

这可能有用-

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;
}

因此，应获取具有以下内容的输入

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

在我看来，采用某种框架或插件来避免在这里重复发明轮子是值得的。我相信有很多可行的轻量级候选者可以实现这一目的。我个人使用jQuery，因此使用jQuery是不需要动脑筋的，我非常可扩展并且非常容易使用

干杯

---

-Derek

你愿意使用JQuery吗？如果愿意，请查看validationEngine插件。我使用它。插件很好。因为这是一个

onload

函数-在服务器端，这种逻辑不是会更好吗？首先发送正确的HTML？@rlemon我想保持它的简单性。没有花哨的弹出窗口之类的东西that@Jonah，您可以指定您希望验证得到处理。在我的应用程序中，我几乎完全按照您所说的做。我突出显示行，然后取消提交。无论哪种方式，如果没有其他内容，这都是一个开始。var标志的确切含义是什么？我用这种方式不使用两个for循环来实现更好的性能最有效的两个问题1.这只适用于validate2，validate1什么也不做2.它只验证一次。也就是说，如果我提交，它会验证，但是下次我提交时它会提交表单，即使我没有做任何更改。但是我有一个想法，只有一个循环可以工作，但仍然有一些错误..非常感谢你的帮助！我最终会使用jquery选项。如果我不能没有任何工作，我将使用Basistance验证。看起来很好。谢谢你的时间，但仍然没有很好地工作。我是ganna，朝着jquery的方向走。

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' />