React表单非空校验优化：输出具体缺失字段提示

核心思路 #

放弃原本的笼统判断，改为主动收集所有未填写的字段名称，再根据收集结果生成精准的提示信息，让用户明确知道哪些字段没填。

修改后的代码实现 #

const handleSubmit = (e) => {
  // 初始化数组存储缺失字段
  const missingFields = [];

  // 逐一校验每个输入字段，为空则加入数组
  if (!formCompra.input1) missingFields.push('input1');
  if (!formCompra.input2) missingFields.push('input2');
  if (!restForm.input3) missingFields.push('input3');
  if (!restForm.input4) missingFields.push('input4');
  if (!restForm.input5) missingFields.push('input5');

  // 存在缺失字段时生成提示
  if (missingFields.length > 0) {
    const tipMessage = `您缺失${missingFields.join('、')}`;
    alert(tipMessage);
  }
};

可选优化：显示友好字段名 #

如果需要给用户展示更易懂的中文名称（比如把input1换成"收货人姓名"），可以用字段映射表来实现：

// 定义字段名与友好名称的映射
const fieldNameMap = {
  input1: '收货人姓名',
  input2: '联系电话',
  input3: '收货地址',
  input4: '邮政编码',
  input5: '订单备注'
};

const handleSubmit = (e) => {
  const missingFields = [];

  if (!formCompra.input1) missingFields.push(fieldNameMap.input1);
  if (!formCompra.input2) missingFields.push(fieldNameMap.input2);
  if (!restForm.input3) missingFields.push(fieldNameMap.input3);
  if (!restForm.input4) missingFields.push(fieldNameMap.input4);
  if (!restForm.input5) missingFields.push(fieldNameMap.input5);

  if (missingFields.length > 0) {
    const tipMessage = `您缺失${missingFields.join('、')}`;
    alert(tipMessage);
  }
};

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