仅为整数添加验证

Add validation for integers only?

本文关键字：验证 添加 整数      更新时间：2023-09-26

我有一个脚本，循环遍历所有元素与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>

试试:

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

}

Replace:

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

基本上与具有类"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;
}

这可能行得通- 

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，所以使用辅助验证是很容易的，它具有相当的可扩展性和非常易于使用。

干杯!

德里克。

相关文章：