Javascript 我如何检查以确保表单已在按钮单击时填写？

我有一个按钮，它根据用户提供的数字进行计算，并将结果填充到页面中。该按钮还可以将产品保存到数据库中，同时还可以用数据库中的相同产品直观地填充页面。基本上，它显示了用户输入到字段中的总数和之前的总数。我的问题是，我想包括错误处理，这样，如果数字是0或NaN，因为他们没有填写所有表单，它将抛出警报，也不会将数据推送到数据库。这是我的尝试，但它不起作用，如果结果是NaN，它仍然显示它并将NaN值推送到数据库，我如何实现这一点？尝试如下：

handleClick = (event, billInfo) => {
event.preventDefault();
const dbRef = firebase.database().ref();

const result =
  (billInfo.amount / billInfo.group) * (billInfo.tip / 100 + 1);

// ATTEMPT START ======

result === NaN
  ? alert("Please fill all forms!")
  : dbRef.push({
      result: result.toFixed(2),
      name: billInfo.name,
    });

// ATTEMPT END ======

this.setState({
  total: result.toFixed(2),
});

这是带有链接到主app.js的按钮的表单组件：

class inputForm extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      group: "",
      amount: "",
      tip: "",
    };
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  clearForm = (event) => {
    event.preventDefault();

    this.setState({
      name: "",
      group: "",
      amount: "",
      tip: "",
    });
  };

  render() {
    return (
      <form className="tipApp">
        <div>
          <label htmlFor="groupName">
            <i class="fas fa-id-card"></i>Group Name?
          </label>
          <input
            onChange={this.handleChange}
            type="text"
            id="groupName"
            value={this.state.name}
            placeholder="Name your group"
            name="name"
          />
        </div>

        <div>
          <label htmlFor="groupSize">
            <i class="fas fa-users"></i>How many?
          </label>
          <input
            onChange={this.handleChange}
            type="number"
            id="groupSize"
            value={this.state.group}
            min="1"
            step="1"
            placeholder="Add the group size"
            name="group"
            required
          />
        </div>

        <div>
          <label htmlFor="billAmount">
            <i class="fas fa-receipt"></i>How much?
          </label>
          <input
            onChange={this.handleChange}
            type="number"
            id="billAmount"
            value={this.state.amount}
            min="0"
            step=".01"
            placeholder="Add the bill total"
            name="amount"
            required
          />
        </div>

        <div>
          <label htmlFor="tipAmount">
            <i class="fas fa-heart"></i>Tip?
          </label>
          <input
            onChange={this.handleChange}
            type="number"
            id="tipAmount"
            value={this.state.tip}
            min="10"
            step="5"
            placeholder="Add the tip %"
            name="tip"
          />
        </div>

        <button onClick={(event) => this.props.getTotal(event, this.state)}>
          Split it!
        </button>
        <button onClick={this.clearForm}>Reset</button>
      </form>
    );
  }
}

类inputForm扩展组件{
构造函数（）{
超级（）；
此.state={
姓名：“，
组：“，
金额：“，
提示：“，
};
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value，
});
};
clearForm=（事件）=>{
event.preventDefault（）；
这是我的国家({
姓名：“，
组：“，
金额：“，
提示：“，
});
};
render（）{
返回(
组名？
有多少
多少钱？
提示
this.props.getTotal（事件，this.state）}>
分开！
重置
);
}
}

这是我试图错误处理的完整app.js主文件：

class App extends Component {
  constructor() {
    super();
    this.state = {
      bills: [],
      total: 0,
    };
  }

  componentDidMount() {
    const dbRef = firebase.database().ref();

    // Event listener that watches the database
    dbRef.on("value", (snapshot) => {
      const firebaseData = snapshot.val();

      const billData = [];

      for (const bill in firebaseData) {
        billData.push({
          id: bill,
          name: firebaseData[bill].name,
          value: firebaseData[bill].result,
        });
      }
      this.setState({
        bills: billData,
      });
    });
  }

  handleClick = (event, billInfo) => {
    event.preventDefault();
    const dbRef = firebase.database().ref();

    const result =
      (billInfo.amount / billInfo.group) * (billInfo.tip / 100 + 1);

    result === NaN
      ? alert("Please fill all forms!")
      : dbRef.push({
          result: result.toFixed(2),
          name: billInfo.name,
        });

    this.setState({
      total: result.toFixed(2),
    });
  };

  deleteBill = (billId) => {
    const dbRef = firebase.database().ref();

    dbRef.child(billId).remove();
  };

  render() {
    return (
      <div className="wrapper">
        <h1 className="logoName">Spl|tr</h1>
        <h3>Bill Splitting App</h3>

        <Form getTotal={this.handleClick} />
        <h2>${this.state.total}</h2>

        <h3>Previous Bills</h3>
        <Bills receipts={this.state.bills} delete={this.deleteBill} />
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
法案：[]，
总数：0，
};
}
componentDidMount（）{
const dbRef=firebase.database（）.ref（）；
//监视数据库的事件侦听器
dbRef.on（“值”，（快照）=>{
const firebaseData=snapshot.val（）；
常量billData=[]；
用于（firebaseData中的const bill）{
billData.push({
id:比尔，
名称：firebaseData[bill]。名称，
值：firebaseData[bill]。结果，
});
}
这是我的国家({
法案：billData，
});
});
}
handleClick=（事件，billInfo）=>{
event.preventDefault（）；
const dbRef=firebase.database（）.ref（）；
常数结果=
（billInfo.amount/billInfo.group）*（billInfo.tip/100+1）；
结果===NaN
？警告（“请填写所有表格！”）
：dbRef.push({
结果：结果。toFixed（2），
名称：billInfo.name，
});
这是我的国家({
总计：结果toFixed（2），
});
};
deleteBill=（billId）=>{
const dbRef=firebase.database（）.ref（）；
dbRef.child（billId.remove（）；
};
render（）{
返回(
Spl | tr
账单拆分应用程序
${this.state.total}
以前的法案
);
}
}

这是Bills.js组件，它在单击按钮时使用表单下方的前几项填充页面：

const Bills = (props) => {
  return (
    <ul>
      {props.receipts.map((bill) => {
        return (
          <li key={bill.id}>
            <p>{bill.name}</p>
            <p>${bill.value}</p>
            <button onClick={() => props.delete(bill.id)}>
              <i class="fas fa-times-circle"></i>
            </button>
          </li>
        );
      })}
    </ul>
  );
};

const Bills=（道具）=>{
返回(

{props.receipts.map（（bill）=>{
返回(

{bill.name}

${bill.value}

props.delete（bill.id）}>

);
})}

);
};

不管结果是否有效，处理程序都会更新状态。一个小的重构应该允许一个有效的结果并推送到DB并更新状态，或者一个无效的结果并发出警报。

0

和

NaN

都是假值，因此您可以简单地检查

result

是否真/假

handleClick = (event, billInfo) => {
  event.preventDefault();
  const dbRef = firebase.database().ref();

  const result =
    (billInfo.amount / billInfo.group) * (billInfo.tip / 100 + 1);

  if (result) {
    dbRef.push({
      result: result.toFixed(2),
      name: billInfo.name,
    });
    this.setState({
      total: result.toFixed(2),
    });
  } else {
    alert("Please fill all forms!")
  }
};

---

如果存在问题，您能否告知问题所在？或者你只是要求代码审查？也许您可以更新您的问题，以包括一个代码示例和一个更正式的问题。根据标题，您似乎想进行表单验证，因此包含表单代码是一个很好的开始。我在这一点上添加了所有内容，我尝试了3次不同的尝试，但迄今为止都没有成功。我已更新了问题以使其更清楚