javascript - 根据元素的颜色验证表单是一个好习惯吗？

Question

我正在处理一个表单，该表单在提交数据之前有一个验证脚本。

基本上在所有输入字段中，我都有一个函数来测试输入内容是否正确，由“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;
        }
        }
        }

它确实有效，但我只是有一种奇怪的感觉，这个验证是基于颜色的。我想知道这样溺爱有没有什么坏处。

Answer 1

我认为这不是一个好主意。

相反，如果您不使用 HTML5 字段验证，我会在字段上附加(或更改)一个属性；例如，不要设置 t.style.backgroundColor="red" 附加一个 data-validation="invalid" 属性，然后使用 CSS 来 style 将其设置为红色背景。

基于语义(含义)而非外观。

然后，您的 onsubmit 处理程序可以检查任何 data-validation="invalid" 字段并根据这些字段发出消息。

提交后不要忘记在服务器上始终再次验证，因为您不能信任客户端验证 - 数据始终可以被验证通过客户端验证后被篡改。