如果特定字段正确为空，如何检查它们？答案

【问题标题】：How to check specific fields if they are empty properly?如果特定字段正确为空，如何检查它们？
【发布时间】：2022-11-03 22:10:04
【问题描述】：

我正在使用输入字段从用户那里获取数据。其中三个字段是必需的，其余的则不是。

所以在 onClick 函数中，如果值为空，我设置了一个条件以显示错误消息。

  const save = (event) => {
    event.preventDefault();
    
    
    console.log("first name", firstName);
    console.log("last name", lastName);
    console.log("email", eMail);
    
    if (firstName === "") {
      console.log('first name empty')
      setErrorFirstName("This field is required");
    } else if (lastName === "") {
      console.log('last name empty')
      setErrorLastName("This field is required");
    } else if (eMail === "") {
      console.log('email empty')
      setErrorEmail("This field is required");
    } else {
      navigate("/home");
    }

假设用户输入了他的名字，但没有输入姓氏和电子邮件。错误消息将仅显示姓氏，而不显示电子邮件。此外，如果名字、姓氏和电子邮件为空，则错误消息将仅显示名字。

我怎样才能为所有的空字段，而不仅仅是一个？

【问题讨论】：

也许您可以创建一个错误消息列表。在每个 if 语句中，将错误消息添加到列表中，最后从列表的所有元素中创建最终错误消息
为什么不使用HTML client-side form validation？
不要使用else if 而只使用if？

标签： javascript reactjs

【解决方案1】：

不是你的问题的真正答案，但我不能使用 cmets：

您可以使用输入元素的“必需”属性

【讨论】：

那么为什么不让它成为一个答案并包含一个演示required 的sn-p？

【解决方案2】：

if 语句之前的 else 将确保仅当前一个 if 为 false 时才会检查此条件。因此，您正在防止同时检查两个错误条件。

在这种情况下，您应该避免使用else if。

这是一个建议：

if (firstName === "") {
  console.log('first name empty')
  setErrorFirstName("This field is required");
} 
if (lastName === "") {
  console.log('last name empty')
  setErrorLastName("This field is required");
}
if (eMail === "") {
  console.log('email empty')
  setErrorEmail("This field is required");
} 
if (firstName !== "" && lastName !== "" && eMail !== "") {
  navigate("/home");
}

【讨论】：