只爲整數添加驗證？

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