根据元素的颜色来验证表单是一个好习惯吗?

Is it a good practice to validate a form based on element's color?

本文关键字：一个 好习惯 元素 颜色 表单 验证      更新时间：2023-09-26

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

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

它实际上是有效的，但我有一种奇怪的感觉，这种验证是基于颜色的。我想知道这样做有什么缺点吗?

我觉得这不是个好主意。

相反，如果你不使用HTML5字段验证，我会在字段上附加(或更改)属性;例如，而不是设置t.style.backgroundColor="red"附加data-validation="invalid"属性，然后使用你的CSS 样式它作为一个红色背景。

以语义(意思)为基础，而不是以外表为基础。

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

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

我会给元素添加一个额外的classname。比如value-is-invalid。然后您可以检查元素classname是否包含这个类。您还可以将background-color: red;移动到css文件中的这个类中。因此，您可以将样式从逻辑中分离出来，并在以后更容易地更改样式。

: 

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

正如Stephen p指出的那样，你不能依赖于客户端验证。始终在服务器端验证

相关文章：