Javascript 基于元素'验证表单是否是一种好的做法；什么颜色？

我正在制作一个表单，在提交数据之前有一个验证脚本

基本上，在所有的输入字段中，我都有一个函数来测试输入的内容是否正确，由“onchange”事件触发。如果内容“无效”，函数将该输入字段的背景设置为红色

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

功能数量（t）
{
var n=t.值；
如果（isNaN（n）=真| | n<0）{
t、 style.backgroundColor=“红色”；
}否则{
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;
        }
        }
        }

var canNotSubmit=0；
函数checkError（）{
var fieldsToCheck=document.getElementsByTagName（“输入”）；
var fieldsQty=fieldsToCheck.length；
对于（var i=0；i我认为这不是一个好主意

相反，如果您不使用HTML5字段验证，我会在字段上附加（或更改）一个属性；例如，而不是设置
t.style.backgroundColor=“red”
附加一个
data validation=“invalid”
属性，然后使用CSS将其设置为红色背景

基于语义（意思），而不是基于外观

然后，onsubmit处理程序可以检查任何
数据验证=“无效”
字段，并根据这些字段发出消息

不要忘记在提交后总是在服务器上再次验证，因为你不能信任客户端验证——数据通过客户端验证后总是会被篡改。
我会在元素中添加一个额外的类名。比如
值无效
。你可以检查元素是否正确s classname包含此类。您还可以将
背景色：red；
移动到css文件中的此类中。这样，您可以将样式与逻辑分离，以后可以更轻松地更改样式

比如：

正如Stephen p指出的那样，您不能依赖客户端验证。也要始终在服务器端进行验证。
这不是最佳做法，因为红色可能意味着任何东西。最好让
checkError（）
做两件事：1.它应该将元素涂成红色，2.在循环中它应该跟踪
numeror
（每次发现错误时递增的新变量）。然后，您应该使用
numerors
来确定表单是否有效。这是一个细微的区别，但会使维护应用程序变得更容易，我相信，只要有服务器端验证就可以了。只是要确保您不会得到任何错误否定，并且用户不能使用表单+1来使用服务器side验证作为主要验证方法。您在客户端进行的任何验证都只是为了方便用户。永远不要相信客户端“验证”的数据。@ChrisWillard-和+1表示“方便用户”，这正是我一直使用的短语。谢谢Stephen P。通过添加属性，我可以更轻松地操作验证。当然，我也会在服务器端编写验证。
.value-is-invalid {
    background-color: red;
}