编写此 javascript 的更有效方式

Question

我正在为我的网站创建一个联系表单，并在提交之前使用 javascript 进行第一层验证，然后通过 php 再次检查，但我对 javascript 比较陌生，这是我的脚本...

$("#send").click(function() {
    var fullname = $("input#fullname").val();
    var email = $("input#email").val();
    var subject = $("input#subject").val();
    var message = $("textarea#message").val();
    if (fullname == ""){
        $("input#fullname").css("background","#d02624");
        $("input#fullname").css("color","#121212");
    }else{
        $("input#fullname").css("background","#121212");
        $("input#fullname").css("color","#5c5c5c");
    }
    if (email == ""){
        $("input#email").css("background","#d02624");
        $("input#email").css("color","#121212");
    }else{
        $("input#email").css("background","#121212");
        $("input#email").css("color","#5c5c5c");
    }
    if (subject == ""){
        $("input#subject").css("background","#d02624");
        $("input#subject").css("color","#121212");
    }else{
        $("input#subject").css("background","#121212");
        $("input#subject").css("color","#5c5c5c");
    }
    if (message == ""){
        $("textarea#message").css("background","#d02624");
        $("textarea#message").css("color","#121212");
    }else{
        $("textarea#message").css("background","#121212");
        $("textarea#message").css("color","#5c5c5c");
    }
    if (name && email && subject && message != ""){
        alert("YAY");
    }
});

如果所有字段都填写完毕，我怎样才能更有效地编写这个并显示警报，谢谢。

Answer 1

$("#send").click(function() {
    var failed = false;

    $('input#fullname, input#email, input#subject, textarea#message').each(function() {
        var item = $(this);
        if (item.val()) {
            item.css("background","#121212").css("color","#5c5c5c");
        } else {
            item.css("background","#d02624").css("color","#121212");
            failed = true;
        }
    });

    if (failed){
        alert("YAY");
    }
});

Answer 2

glavic 和 matt 的答案正是我要建议的，但我会更进一步，将逻辑与演示分开。

当字段包含无效条目时，在您的 css 中定义类，并使用 $.addClass() 或 $.removeClass() 添加或删除该类

Answer 3

由于您使用的是 jQuery，我建议在每个需要非空值 (class="required") 的字段上设置一个类。

然后你做这样的事情：

var foundEmpty = false;
$(".required").each(function()
{
   if($(this).val())
   {
       foundEmpty=true;
       $(this).style("background-color", "red");
   }
});
if(foundEmpty)
{
  alert("One or more fields require a value.");
}

Answer 4

给他们一个公共类，定义类来应用样式，然后这样做：

JS

$("#send").click(function() {
    $('.validate').attr("class", function() {
        return $(this).val() === "" ? "validate invalid" : "validate valid";
    });
    if( $('.invalid').length === 0 ) {
        alert('YAY');
    }
});

CSS

.valid {
    background:#121212;
    color:#5c5c5c
}

.invalid {
    background:#d02624;
    color:#121212;
}

HTML

<button id="send">SEND</button><br>
<input class="validate"><br>
<input class="validate"><br>
<input class="validate"><br>
<input class="validate">

---

JSFIDDLE DEMO

---

更有效的方法：

var validate = $('.validate');

$("#send").click(function() {
    validate.attr("class", function() {
        return $(this).val() === "" ? "validate invalid" : "validate valid";
    });
    if( validate.filter('.invalid').length === 0 ) {
        alert('YAY');
    }
});

Answer 5

您可以使用 jQuery 遍历每个对象并获取它们的值。根据您的表单，此代码会发生变化，但它只是给您一个示例。我可能在这里和那里遗漏了几个括号，但概念就在那里。

var objectName=$(this).attr('id');    
$('#formId').children().each(
        function(){

            if ($(this).value == ""){
                 $(this).css("background","#d02624");
                 $(this).css("color","#121212");
                 $error[objectName]='true';

            }else{
                 $(this).css("background","#121212");
                 $(this).css("color","#5c5c5c");
                 $error[objectName]='false';
            }




        }
    );
           $.each(error, function(key, value){


                if (value=='false'){
                  alert (key + 'is empty');
                }
           });

Answer 6

我可能会将其中的一部分分成我的 css 文件。如果任何字段为空，则向对象添加类似“empty”的类，如果不是，则将其删除。然后在您的 css 文件中，您可以添加一些描述符，例如：

input#fullname,
input#email {
   ...
}

input#fullname.empty,
input#email.empty {
    ...
}

您可以使用 jQuery addClass() 和 removeClass()。

然后您可以按如下方式添加循环：

var inputs = new Array();
inputs[0] = "input#fullname";
inputs[1] = "input#email";
inputs[2] = "input#subject";
inputs[3] = "textarea#message";
var complete = true;
for (var i = 0; i < 4; i++) {
    var value = $(inputs[0]).val();
    if (value.length > 0) {
        $(inputs[i]).removeClass("empty");
    } else {
        complete = false;
        $(inputs[i]).addClass("empty");
    }
}
if (complete) {
}

编辑：

好了，给你修好了。