如何使用 jquery 验证器插件验证多个输入类型文件

Question

我正在使用 jQuery 验证器插件，我在验证图像时遇到了一个问题，我有 4 个输入类型文件来上传图像（其中一个在页面上，3 个动态来）关于一部电影，上传图像不是必需的，但是, 如果有人想上传，那么它应该具有有效的扩展名意味着只允许 jpg.jpeg 和 png imaes ..

我尝试了很多方法，但没有成功....请告诉我我是否正在做正确的验证方法，请帮助我。 这是sn-p的代码

<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

你离我们很近。这是与您问题中的 HTML/CSS 匹配的正确 Javascript：

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"
            }
        });
    });
});