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"，然后执行：

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=""]')

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

3 个答案: