如何使用jQuery驗證器插件驗證多個輸入類型文件

Question

我正在使用jQuery驗證器插件，在驗證圖像期間卡住了問題，我有4個輸入類型文件要上傳圖像（其中一個在頁面上，3個在動態顯示）關於一部電影，上傳圖像並不是必不可少的，但如果有人想要上傳，那麼它應該是有效的擴展手段，只有jpg.jpeg和png圖像被允許..

我嘗試了很多方法，但沒有得到成功....請告訴我，我正在做適當的方式來驗證請幫助我。 這裏是代碼片段

<script type="text/javascript" type="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script> 
<style type="text/css"> 
    label { width: 10em; float: left; } 
    p { clear: both; } 
    label.error { 
     float: none; 
     color: red; 
     padding-left: .5em; 
     vertical-align: top; 
    } 
    input [type=file] { 
     display:block; 
     width: 100%; 
     height: 22px; 
     margin: 2px 4px; 
     border:1px solid grey; 
    } 
</style> 

<form name="MovieForm" id="MovieForm" action="" method="POST" enctype="multipart/form-data"> 
    <table border="0" width="100%" align="left" cellpadding="5" cellspacing="5"> 
     <tr> 
      <td width="25%">Movie Name :</td> 
      <td width="75%" ><input type="text" name="bizName" id ="movieName" size="47" value=""> 
      </td> 
     </tr> 
     <tr> 
      <td >main poster:</td> 
      <td ><input type="file" name="mainposter" id="mainposter" size="50" ></td> 
     </tr> 
     // These all 3 input type=file are coming dynamically through php code 
     <tr> 
      <td >Additional Poster:</td> 
      <td ><input type="file" name="additionalposter1" id="additionalImage1" size="50" ></td> 
     </tr> 
     <tr> 
      <td >Additional Poster (2):</td> 
      <td ><input type="file" name="additionalposter2" id="additionalImage2" size="50" ></td> 
     </tr> 
     <tr> 
      <td>Additional Poster (3):</td> 
      <td><input type="file" name="additionalposter3" id="additionalImage3" size="50" ></td> 
     </tr> 
     <tr> 
      <td >&nbsp;</td> 
      <td> 
       <input type="submit" value="Submit" name="submit" class="submit"> 
       <input type="reset" class="formbtn" value="clear" name="clear" /> 
      </td> 
     </tr> 
    </table> 
</form> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    jQuery('#movieForm').submit(function(){ 
    //console.log('included latest jQuery'); 
    var validator=jQuery("#createAdForm").validate({ 
     rules: { 
      movieName: { 
       required: true, 
       minlength: 2 
      } 
     }, 
     messages: { 
      movieName: { 
       required: "Please write movie name", 
       minlength: "Moview name must consist of at least 2 characters" 
      } 
     }, 
    }); 

    jQuery("input[type=file]").bind(function(){ 
    jQuery(this).rules("add", { 
     accept: "png|jpe?g", 
     messages: { 
     accept :"Only jpeg, jpg or png images" 
     } 
    }); 
    }); 
// 
// How to add this function in validator plugin? 

// var ext = jQuery('.additionalImage').val().split('.').pop().toLowerCase(); 
// var allow = new Array('gif','png','jpg','jpeg'); 
// if(jQuery.inArray(ext, allow) == -1) { 
//  alert('invalid extension!'); 
// } 

}); 
</script> 

Answer 1

你很驚人地接近。這裏是正確的Javascript來匹配您的問題中的HTML/CSS：

jQuery(document).ready(function() { 
    jQuery("#MovieForm").validate({ 
     rules: { 
      bizName: { 
       required: true, 
       minlength: 2 
      } 
     }, 
     messages: { 
      bizName: { 
       required: "Please write movie name", 
       minlength: "Movie name must consist of at least 2 characters" 
      } 
     } 
    }); 

    jQuery("input[type=file]").each(function() { 
     jQuery(this).rules("add", { 
      accept: "png|jpe?g", 
      messages: { 
       accept: "Only jpeg, jpg or png images" 
      } 
     }); 
    }); 
});