只为整数添加验证？

Question

我有一个脚本，通过class="validate"所有提交的元素循环，如果它们为空，则取消提交并更改它们的背景颜色。任何人都知道一种方式，我可以在同一个函数中添加第二个验证，以确保class="validate2"中的elemnets只是数字（无字）？这里是我的脚本：

<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

试试这个方法：

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

替换：

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 3

基本上你带类的元素做了同样的用类“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; 
} 

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

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

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是一件简单的事情，我可以扩展并且非常易于使用。

干杯！

-Derek