如何将此验证功能应用于所有输入？

Question

我有这段代码可以验证一个输入文件，但我需要验证多个字段（因为用户可以根据需要添加尽可能多的“输入文件”），现在不知道如何验证。我一直在尝试使用循环，但没有任何结果（主要是因为即使我在 w3school 一遍又一遍地阅读它，我也不理解它们）。

https://jsfiddle.net/ElenaMcDowell/2xrqp6zg/2/

$( ".postreplyForm" ).submit(function( event ) {
var fileBox = $('.post-file').val(); //This is the Class of the input file
if (fileBox === '') {
   //If there is no file
   return;
} else {
   //File format
   var fileExtension = ['jpg', 'jpeg', 'png', 'mp3', 'mp4', 'pdf', 'pps', 'ppt', 'pptx', 'xls', 'doc', 'docx', 'txt'];
   if ($.inArray($('.post-file').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
      $(".errorFile").html('<br><center><p class="signuperror">File format not allowed.</p></center><br>');
   } else {
      $(".errorFile").html(' ');
      //File size
      var fileSize = $('.post-file')[0].files[0].size;
      if (fileSize > 1000000) {
         $(".errorFile").html('<br><center><p class="signuperror">The file is too big.</p></center><br>');
      } else {
         $(".errorFile").html(' ');
         return;
      }

   }

}
});

Answer 1

您可以使用 $('.post-file')[0].files 获取所有值，然后遍历每个文件并检查条件，然后在您的 div errorFiles 中打印一些消息。另外，使用一些变量并将其设置为true，如果任何条件不满足设置为false，取决于此变量，请阻止您的表单提交。

演示代码：

$(".postreplyForm").submit(function(event) {
  var fileBox = $('.post-file').val();
  if (fileBox === '') {
    return false; //prevent form to submit
  } else {
    //File format
    var fileExtension = ['jpg', 'jpeg', 'png', 'mp3', 'mp4', 'pdf', 'pps', 'ppt', 'pptx', 'xls', 'doc', 'docx', 'txt'];
    var flag = true; //decalre this
    var fileArray = $('.post-file')[0].files; //get all files
    $(".errorFile").html('');
    //loop through files
    $.each(fileArray, function(i, v) {
      name = v.name; //name of file
      fileSize = v.size; //size of file
      console.log(name);
      if ($.inArray(name.split('.').pop().toLowerCase(), fileExtension) == -1) {
        flag = false;
        $(".errorFile").html('<br><center><p class="signuperror">File format not allowed.</p></center><br>');
      } else {
        if (fileSize > 1000000) {
          $(".errorFile").html('<br><center><p class="signuperror">The file is too big.</p></center><br>');
          flag = false;
        }
      }
    })
  }
  //check not true prevnt submit
  if (!flag) {
    return false;
  } else {
    return true;
  }

});

.errorFile {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="create-mode postreplyForm" method="post" action="a.php" name="post" enctype="multipart/form-data">
  <table class="table-newpost">
    <tr>
      <td colspan="5"><br>
        <div style="font-weight: bold; font-size: 14px; margin-bottom: -10px;">Attach file</div>
        <br>
        <span>File formats allowed: (.jpg, .jpeg, .png, .mp3, .mp4, .pdf, .zip, .rar, .pps, .ppt, .pptx, .xls, .doc, .docx, .txt, .rtf)</span>
        <br><br>
        <div class="fileBox">
          <div style="display: flex; margin-bottom: 2px;">
            <input type="file" name="file[]" id="fileID1" class="post-file" multiple="multiple">
            <div id="1" class="fileBtn fileDeleteInPost" title="Delete file">x</div>
            <div class="fileBtn add-file" title="Add file">+</div>
          </div>
        </div>
        <div class="errorFile"></div>
      </td>
    </tr>
    <tr>
      <td colspan="5" style="text-align: right;">
        <input type="hidden" name="reply-by" value="<?php echo $_SESSION['userId']; ?>">
        <button type="submit" name="submit-postreply" id="Miau">Submit</button>
      </td>
    </tr>
  </table>
</form>