jQuery多表单场景下文件输入字段的非空验证指南

// 错误的验证示例：这只会检查元素是否存在，而非是否选择了文件
var fileInput = $(this).find('input[type="file"]');
if (fileInput.length === 0) { 
    alert("请选择一个文件上传。");
    return;
}

// 正确的验证示例：检查value属性是否为空字符串
var fileInput = $(this).find('input[type="file"]');
if (fileInput.val() === '') { 
    alert("请选择一个文件上传。");
    return;
}

$(document).ready(function() {
    // 监听所有form元素的提交事件
    $("form").on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为

        // 在当前提交的表单(this)中查找类型为file的input元素
        var fileInput = $(this).find('input[type="file"]');

        // 执行文件输入字段的非空验证
        if (fileInput.val() === '') {
            alert("请选择一个文件上传。");
            return; // 阻止表单继续提交
        }

        // 如果文件已选择，可以在此处执行其他验证或异步提交表单
        // 例如：$(this).off('submit').submit(); 或使用 AJAX 提交
        alert("文件已选择，可以提交表单。");
        // 实际应用中，您可能会在这里发起 AJAX 请求或解除事件绑定后提交表单
        // $(this).off('submit').submit(); // 如果需要传统表单提交，解除事件绑定后手动提交
    });
});

<!-- 这种结构是无效的，form标签不能直接包含在tr中 -->
<tr>
    <form method="post" enctype="multipart/form-data">
        <td>File 1</td>
        <td><input type="file" name="file1" class="fileinput"></td>
        <td><input type="submit" name="submit" value="Upload"></td>
    </form>
</tr>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>类型</th>
      <th>选择文件</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>文件 1</td>
      <td>
        <!-- 每个文件输入都有一个独立的表单 -->
        <form method="post" enctype="multipart/form-data" id="form1">
          <input type="hidden" name="recID" value="">
          <input type="file" name="file1" class="fileinput">
        </form>
      </td>
      <td>
        <!-- 提交按钮通过form属性关联到form1 -->
        <input type="submit" name="submit" value="上传" form="form1">
      </td>
    </tr>
    <tr>
      <td>文件 2</td>
      <td>
        <form method="post" enctype="multipart/form-data" id="form2">
          <input type="hidden" name="recID" value="">
          <input type="file" name="file2" class="fileinput">
        </form>
      </td>
      <td>
        <input type="submit" name="submit" value="上传" form="form2">
      </td>
    </tr>
    <tr>
      <td>文件 3</td>
      <td>
        <form method="post" enctype="multipart/form-data" id="form3">
          <input type="hidden" name="recID" value="">
          <input type="file" name="file3" class="fileinput">
        </form>
      </td>
      <td>
        <input type="submit" name="submit" value="上传" form="form3">
      </td>
    </tr>
    <tr>
      <td>文件 4</td>
      <td>
        <form method="post" enctype="multipart/form-data" id="form4">
          <input type="hidden" name="recID" value="">
          <input type="file" name="file4" class="fileinput">
        </form>
      </td>
      <td>
        <input type="submit" name="submit" value="上传" form="form4">
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <a href="back.php">
          <button type="button">返回</button>
        </a>
      </td>
    </tr>
  </tbody>
</table>