Vue项目中如何验证嵌套数组输入，阻止空值提交至后端

1. 编写全局验证函数 #

在setup()中添加验证逻辑，遍历所有labvalues条目及对应的lab_data数组，检查每个输入值是否为有效浮点数字：

function validateLabValues() {
  let isValid = true;
  const errorMessages = [];

  // 遍历每条记录
  labvalues.value.forEach(item => {
    // 筛选当前记录中无效的输入字段
    const emptyFields = item.lab_data
      .map((val, idx) => ({ val, idx }))
      .filter(({ val }) => isNaN(val) || val === '' || val === undefined)
      .map(({ idx }) => idx + 1); // 转换为用户可见的1起始序号

    if (emptyFields.length > 0) {
      isValid = false;
      errorMessages.push(`记录单号 ${item.journal_number}：第 ${emptyFields.join(', ')} 个输入框不能为空或无效`);
    }
  });

  // 验证不通过时弹出警告
  if (!isValid) {
    alert('提交失败，请修正以下问题：\n' + errorMessages.join('\n'));
    // 若使用UI组件库（如Element Plus），可替换为更美观的提示：
    // ElMessage.error('提交失败，请修正以下问题：\n' + errorMessages.join('\n'));
  }

  return isValid;
}

2. 提交前触发验证 #

修改提交函数，先执行验证逻辑，只有验证通过才发起后端请求：

async function submitLabValues() {
  // 验证不通过则终止提交流程
  if (!validateLabValues()) return;

  try {
    await axios({
      method: "put",
      url: BACKEND_PATH.value + "/lab_value",
      data: {
        "lab-data": labvalues.value, // 键名含横杠，需用引号包裹避免语法错误
      },        
    });
    alert('提交成功');
    // 可添加提交成功后的逻辑，如刷新数据、退出编辑模式等
  } catch (err) {
    alert(`提交失败：${err.message}`);
  }
}

3. 优化输入框实时反馈（可选） #

为输入框添加失焦验证，让用户即时看到输入错误：

模板修改 #

给输入框添加失焦事件和错误样式：

<tr v-for="(item, itemIndex) in labvalues" :key="item.journal_number">
  <!-- 其他列省略 -->
  <td v-if="editItem === true">
    <input
      :id="`lab-${item.journal_number}-9`"
      v-model.number="item.lab_data[9]"
      title="请输入有效的数字（如12.34）"
      pattern="^\d{1,3}(\.\d{1,3})?$" <!-- 修正正则，支持整数或1-3位小数 -->
      type="text"
      @keypress="isNumber"              
      @focusin="chemValueChanged"
      @blur="checkFieldValidity(item.journal_number, item.lab_data, 9)"
      :class="{'form-control is-invalid': isFieldInvalid(item.journal_number, 9)}"
      required
    />
    <div class="invalid-feedback">请输入有效的数字，不能为空</div>
  </td>
</tr>

添加实时验证逻辑 #

在setup()中维护无效字段状态：

// 存储无效字段：{ 记录单号: Set(无效字段索引) }
const invalidFields = ref({});

// 检查单个字段有效性
function checkFieldValidity(journalNumber, dataArr, index) {
  const isInvalid = isNaN(dataArr[index]) || dataArr[index] === '' || dataArr[index] === undefined;
  
  if (!invalidFields.value[journalNumber]) {
    invalidFields.value[journalNumber] = new Set();
  }

  isInvalid 
    ? invalidFields.value[journalNumber].add(index) 
    : invalidFields.value[journalNumber].delete(index);
}

// 判断字段是否无效
function isFieldInvalid(journalNumber, index) {
  return invalidFields.value[journalNumber]?.has(index) || false;
}

关键细节说明 #

• v-model.number会将空输入转为NaN，因此验证需覆盖isNaN(val)、空字符串、undefined三种情况
• 正则表达式修正为^\d{1,3}(\.\d{1,3})?$，适配整数或1-3位小数的输入需求
• 提交数据的键名lab-data需用引号包裹，避免JavaScript语法错误

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