jquery - 在jQuery中检查字段是否为空的快捷方式

Question

$(document).ready(function() {
    $("#submit").click(function(event) {
        if ($("#name").val() == '')
        {
            event.preventDefault();
            $("#name").css("border", "solid 2px #ff0000");
        }
        else if ($("#day").val() == '')
        {
            event.preventDefault();
            $("#day").css("border", "solid 2px #ff0000");
        }   
        else if ($("#month").val() == '')
        {
            event.preventDefault();
            $("#month").css("border", "solid 2px #ff0000");
        }
        else if ($("#year").val() == '')
        {
            event.preventDefault();
            $("#year").css("border", "solid 2px #ff0000");
        }
        else if ($("#email").val() == '')
        {
            event.preventDefault();
            $("#email2").css("border", "solid 2px #ff0000");
        }
        else if ($("#pass").val() == '')
        {
            event.preventDefault();
            $("#pass").css("border", "solid 2px #ff0000");
        }   
        else if ($("#pass2").val() == '')
        {
            event.preventDefault();
            $("#pass2").css("border", "solid 2px #ff0000");
        }           
        else
        {
            $("#submit").submit();
        }
    });
});

所以我一一检查，如果字段为空，如果是，它将用红色标记边框。如果没有，则提交（）。

但这太乱了，有没有办法让它更短？

就像使用数组一样？

Answer 1

$(document).ready(function() {
    $("#submit").on('click', function(e) {
        e.preventDefault();

        var valid = true;

        $(':input', this.form).each(function(i, ele) {
            if (ele.value.trim() == "") {
                ele.style.border = '2px solid #ff0000';
                valid = false;
            }
        });

        if (valid) this.form.submit();
    });
});

Answer 2

arr = ['#name','#pass']; //etc

$.each(arr,function(i){
   if ($(this).val()=='') {
      e.preventDefault();
      $(this).css(...);
   }
});

Answer 3

就在这里。

经典的方法是class="required"在您的输入上添加 a 然后执行：

var emptyInput = $('.required[value=""]')
if(emptyInput.length != 0){
    event.preventDefault()
    emptyInput.css("border", "solid 2px #ff0000")
}

如果您不想更改 DOM，请更改：

var emptyInput = $('.required[value=""]')

为了那个原因 ：

var emptyInput = $('input:text[value=""]')