如何用JavaScript检查CSV文件列数？及现有代码修复

需求背景 #

现有两个按钮：“选择文件”用于上传本地CSV文件，“加载文件”需要触发校验逻辑——检查上传的CSV是否为指定列数（示例为3列），符合条件则提示成功，不符合则提示失败。

原代码问题分析 #

1. 绑定错误：校验函数checkFunc()被绑定在了“选择文件”的<label>标签上，而非目标的“加载文件”按钮，导致点击加载按钮时根本不会触发校验逻辑。
2. 全局变量依赖：直接使用inputFile存在全局变量未定义的风险，应当通过document.getElementById显式获取DOM元素。
3. CSV处理不严谨：直接用split('\n')和split(',')分割CSV，会忽略以下场景：
   • 文件首/尾可能存在空行，导致列数判断错误
   • 字段中包含引号包裹的逗号（比如"a,b",c,d会被错误分割为4列）
4. 无异常场景提示：未选择文件、文件为空等场景没有反馈，用户无法感知操作无效。

修改后的代码 #

修正后的HTML #

<input type="file" class="custom-file-input form-control-sm" id="inputFile" onchange="handleFiles(this.files)" accept=".csv">
<label class="custom-file-label col-form-label-sm" for="inputFile">Input the File</label>

<button type="button" class="btn btn-outline-dark rounded w1-right set-sql" id="lfb" onclick="checkFunc()">Load File</button>

优化后的JavaScript函数 #

async function checkFunc() {
  const inputFile = document.getElementById('inputFile');
  // 检查是否选择了文件
  if (!inputFile.files.length) {
    alert("请先选择CSV文件");
    return;
  }

  try {
    const csvFileInText = await inputFile.files[0].text();
    // 过滤空行，避免空文件或首尾空行干扰判断
    const lines = csvFileInText.split('\n').filter(line => line.trim() !== '');

    if (lines.length === 0) {
      alert("文件内容为空，请检查");
      return;
    }

    // 处理引号包裹的逗号：先替换引号内内容为占位符，再分割逗号
    const firstLine = lines[0].trim();
    const tempLine = firstLine.replace(/"[^"]*"/g, 'PLACEHOLDER');
    const columnCount = tempLine.split(',').length;

    if (columnCount === 3) {
      alert("文件上传校验成功");
    } else {
      alert(`文件列数错误，需要3列，当前为${columnCount}列，请检查文件`);
    }
  } catch (e) {
    console.error("文件处理出错:", e);
    alert("文件读取失败，请检查文件格式");
  }
}

关键修改点说明 #

• 将校验函数绑定到“加载文件”按钮，确保点击按钮才触发校验逻辑
• 显式获取DOM元素，避免全局变量依赖问题
• 过滤空行，避免空文件或无效行导致的错误判断
• 优化CSV列数计算逻辑，初步支持引号包裹逗号的场景（如果需要处理更复杂的CSV格式，推荐使用成熟的CSV解析库）
• 增加未选择文件、空文件、读取错误等场景的提示，提升用户操作体验

内容的提问来源于stack exchange，提问作者ibd10yk