Question

我在提交数据之前处理具有验证脚本的表单。

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

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将样式作为红色背景。

基于语义（含义）而不是外观。

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

请勿在提交后忘记始终在服务器上再次验证，因为您无法信任客户端验证 - 数据在通过客户端验证后总是会被篡改。

Answer 2

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

像：

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

正如Stephen P所指出的，你不能依赖客户端验证。总是在服务器端验证。

基于元素颜色验证表单是一种好习惯吗？

2 个答案: