Question

大家好，谢谢阅读！

我创建了一个可以在登录表单上使用的句柄提交功能。我希望根据输入状态（例如电子邮件，密码，密码确认）无法提交表单。

下面显示了我曾尝试过的一小段尝试，但这似乎无法正常工作。（我知道下面的两个现在已被注释掉，但无论如何它们都无法工作。）

使用此逻辑来实现它的最佳方法是什么？

下面是我有问题的代码。

handleSubmit(e) {
    e.preventDefault();
    try {
      if (
        !this.state.email < 8 //&&
        //!this.state.password < 8
        // this.state.password !== this.state.passwordConfirm
      ) {
        alert(`please enter the form correctly `);
      } else {

        const data = { email: this.state.email, password: this.state.password };

        fetch("/admin-Add-Users", {
          method: "POST", // or 'PUT'
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(data)
        })
          .then(response => response.json())
          .then(data => {
            console.log("Success:", data);
          })
          .catch(error => {
            console.error("Error:", error);
          });
        alert(`Congradulations you have signed up`);
      }
    } catch (e) {
      console.log(e);
    }
  }

Answer 1

看看代码，我认为您可以简化条件查询。

if (!(this.state.email < 8 && this.state.password < 8 && this.state.password == this.state.passwordConfirm)) {
    alert(`please enter the form correctly `);
} else {
    ...
}

在这里，我们要说的是有效，我们正在检查所有道具是否有效。重写的也许更好一点：

checkValidity = ({email, password, passwordConfirm}) => { 
    return email < 8 
            && password < 8 
            && password == passwordConfirm
}


if (!checkValidity(this.state)) {
    alert(`please enter the form correctly `);
} else {
    ...
}

Answer 2

我很愚蠢，而if语句的实际逻辑不正确。这样就解决了:)

if (
      this.state.email.length < 8 ||
      this.state.password.length < 8 ||
      !(this.state.password === this.state.passwordConfirm)
    ) {
      alert(`please enter the form correctly `);
      console.log(this.state.email);
      console.log(this.state.password);
    } else {

根据输入状态有条件地提交表格

2 个答案: