如何实现表单必填字段的批量空值校验？

你当前的代码用了else if逻辑，这会导致只要第一个不满足的条件被触发，后续的字段检查就会直接跳过，所以只能显示第一个空字段的错误。要实现所有空必填字段都显示错误，需要调整判断逻辑：

修改后的代码 #

const save = (event) => {
  event.preventDefault();

  console.log("first name", firstName);
  console.log("last name", lastName);
  console.log("email", eMail);

  // 重置所有错误提示，避免上次验证的残留信息
  setErrorFirstName("");
  setErrorLastName("");
  setErrorEmail("");

  let isValid = true;

  // 独立检查每个必填字段，不用else if
  if (firstName === "") {
    console.log('first name empty');
    setErrorFirstName("This field is required");
    isValid = false;
  }
  if (lastName === "") {
    console.log('last name empty');
    setErrorLastName("This field is required");
    isValid = false;
  }
  if (eMail === "") {
    console.log('email empty');
    setErrorEmail("This field is required");
    isValid = false;
  }

  // 只有所有必填字段都填写完整时，才跳转页面
  if (isValid) {
    navigate("/home");
  }
};

关键改动说明 #

1. 移除else if，改用独立if：这样每个必填字段都会被逐一检查，不管前面的字段是否为空，所有空字段的错误提示都会被设置。
2. 重置错误提示：每次验证前清空所有错误信息，避免用户修正部分字段后，旧的错误提示还留在页面上。
3. 新增isValid标记：用来跟踪表单是否完全符合要求，只有当所有必填字段都不为空时，才执行跳转逻辑。

这样修改后，不管是单个字段为空，还是多个必填字段同时为空，对应的错误提示都会全部显示出来，用户能清楚看到所有需要补充的内容。

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