如何基于输入状态实现表单的条件式提交？

嘿，我看了你这段handleSubmit的代码，问题主要出在验证条件的语法和逻辑判断上，咱们一步步来修正：

原代码的核心问题 #

1. 语法错误：!this.state.email < 8 这种写法完全不符合JS逻辑——你想判断邮箱长度小于8，但这里把!this.state.email（布尔值）和数字8比较，结果永远是false，根本起不到验证作用。
2. 逻辑判断错误：原代码的if条件想表达「有验证不通过的情况」，但你用了&&（且），这意味着只有所有错误同时发生才会提示，这显然不对；应该用||（或），只要有一项不满足就拦截提交。
3. 缺失确认密码的验证：你注释掉的密码确认逻辑没加到判断里，这会导致用户输入不同密码也能提交。

修复后的完整代码 #

handleSubmit(e) {
  e.preventDefault();
  try {
    // 提取状态里的字段，让逻辑更清晰
    const { email, password, passwordConfirm } = this.state;
    
    // 验证规则：只要有一项不满足，就触发错误提示
    const hasError = 
      email.length < 8 || 
      password.length < 8 || 
      password !== passwordConfirm;

    if (hasError) {
      alert('请正确填写表单：邮箱/密码长度至少8位，且两次输入的密码需一致');
      return; // 终止后续代码执行
    }

    // 验证通过，执行提交逻辑
    const data = { email, password };
    fetch("/admin-Add-Users", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
      console.log("Success:", data);
      alert('恭喜你注册成功！'); // 把成功提示放在这里，确保请求成功后再弹出
    })
    .catch(error => {
      console.error("Error:", error);
      alert('注册失败，请稍后重试'); // 增加错误处理的提示
    });

  } catch (e) {
    console.log(e);
    alert('出现未知错误，请稍后重试');
  }
}

额外优化的点 #

• 把成功提示移到fetch的then回调里：原代码不管请求成功与否都会弹出成功提示，这会误导用户，现在只有请求成功后才会显示。
• 增加了请求失败和catch块的错误提示，提升用户体验。
• 用解构赋值提取state字段，让代码更简洁易读。

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