根據元素的顏色驗證表單是否是一種好的做法？

我正在處理提交數據前有驗證腳本的表單。根據元素的顏色驗證表單是否是一種好的做法？

基本上在所有輸入字段中，我有一個函數來測試輸入內容是否正確，由'onchange'事件觸發。如果內容爲「無效」，該功能會將該輸入字段的背景設置爲紅色。

function looseColorQty(t) 
    { 
    var n = t.value; 
    if(isNaN(n) == true || n < 0){ 
     t.style.backgroundColor="red";  
    } else { 
     t.style.backgroundColor=""; 
     } 
    }

然後，當用戶點擊「提交」按鈕，還有另外一個劇本，如果這種形式可以提交基於任何輸入字段是「紅色」來檢查。

var canNotSubmit = 0; 
function checkError(){ 
    var fieldsToCheck = document.getElementsByTagName("input"); 
    var fieldsQty = fieldsToCheck.length; 

    for(var i=0; i<fieldsQty; i++){ 
     var checkTarget = fieldsToCheck[i].style.backgroundColor; 

      if(checkTarget == "red"){ 
      document.getElementById("tips").className = "tipError"; 
      document.getElementById("tips").innerHTML = "Please correct all RED fields before you submit."; 
      canNotSubmit = 1; 
      return; 
     } 
     } 
     }

它實際上工作，但我只是有一種奇怪的感覺，這種驗證是基於顏色。我想知道是否有這樣的缺點。

來源

2014-05-12 Stephen Kong

這不是最佳做法，因爲紅色可能意味着任何事情。最好讓'checkError（）'做兩件事：1.它應該將元素着色爲紅色，2.在循環中它應該跟蹤'numErrors'（每次發現錯誤時計數一個新變量）。那麼你應該使用'numErrors'來確定表單是否有效。這是一個微妙的差異，但將使維護應用程序更容易，後來 –

只要有服務器端驗證是好的，我相信。只是想確保您不會收到任何錯誤的否定信息，並且用戶無法使用表單 – Luke

我認爲這不是一個好主意。相反，如果您未使用HTML5字段驗證，我會在字段上附加（或更改）一個屬性;比如設置t.style.backgroundColor="red"附加一個data-validation="invalid"屬性，然後用你的CSS 風格它作爲紅色背景。

基於語義（含義）而不是外觀。

然後你onsmitmit處理程序可以檢查任何data-validation="invalid"字段併發出消息基於這些。

不要忘了總是在服務器上再次驗證後提交，因爲你不能信任的客戶端驗證 - 數據總是可以用後，已通過客戶端驗證篡改。

來源

2014-05-12 21:42:03

+1將服務器端驗證用作主要驗證方法。您在客戶端進行的任何驗證都只是爲了方便用戶。永遠不要信任客戶端「驗證」的數據。 – WillardSolutions

@ChrisWillard - 和「爲了方便用戶」+1，這就是我一直使用的確切短語。 –

謝謝Stephen P.通過添加一個屬性，它使我更容易操作驗證。當然我也會在服務器端寫驗證。 –

我會爲元素添加一個額外的類名。像value-is-invalid。比你可以檢查元素classname是否包含這個類。您也可以將您的background-color: red;移動到這個類中的一個css文件中。所以你可以從邏輯上分離風格，並在以後更容易地改變風格。

像：

.value-is-invalid { 
    background-color: red; 
}

斯蒂芬p指向了你不能依賴客戶端驗證。總是在服務器端進行驗證。

來源

2014-05-12 21:56:57 Max

根據元素的顏色驗證表單是否是一種好的做法？

回答

相關問題