檢查jQuery中的字段是否爲空的快捷方式

$(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(); 
     } 
    }); 
});

所以我正在逐個檢查，如果字段爲空，如果是，則會用紅色標記邊框。如果不是，則提交（）。檢查jQuery中的字段是否爲空的快捷方式

但是，這是如此混亂，有沒有辦法讓它更短？

像使用數組？

來源

2013-05-16 user2391753

是的，爲什麼你不使用一個數組與循環？ – androidavid

你應該使用'event.preventDefault（）'？ – adeneo

@adeneo你明白我的問題嗎？ – user2391753

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

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

來源

2013-05-16 22:07:32 androidavid

$(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(); 
    }); 
});

來源

2013-05-16 22:13:08 adeneo

您可以通過執行'return valid'來刪除條件和'preventDefault' –

是的，有。

經典的方式做到這一點是增加一個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=""]')

來源

2013-05-16 22:15:25

檢查jQuery中的字段是否爲空的快捷方式

回答

相關問題