在 event.preventDefault 之后提交表单（event.preventDefault 行为）

Question

我制作了一个注册页面，希望它在提交前进行一些验证。因此，我将 event.preventDefault 放入我的 handleSubmit 函数中。 event.preventDefault是为了防止默认函数，所以如果表单是空白的，那么它不会提交。但是，在我填写所有空白后，它可以提交。我的问题是event.preventDefault填空后还在handleSubmit函数中，为什么可以提交表单？或者，如果用户填写所有空白，event.preventDefault 将被禁用？

谢谢！

export default function RegisterPage() {
  const [values, setValues] = useState({
    userName: "",
    nickName: "",
    password: "",
  });

  const [errors, setErrors] = useState({});
  const [apiResError, setApiResError] = useState("");

  const handleSubmit = (e) => {
    setApiResError("");
    e.preventDefault();
    registerAccount(values.userName, values.nickName, values.password).then(
      (res) => {
        console.log(res);
      }
    );
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleFocus = (e) => {
    const { name } = e.target;
    setErrors({ ...errors, [name]: "" });
  };

  return (
    <RegisterPageContainer>
      <RegisterPageTitle>Register</RegisterPageTitle>
      {apiResError && <div>{apiResError}</div>}
      <RegisterForm onSubmit={handleSubmit}>
        <InputWrapper>
          <UserNameInput
            name="userName"
            type="text"
            placeholder="Username"
            onChange={handleChange}
            value={values.userName}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.userName && <div>{errors.userName}</div>}
        <InputWrapper>
          <NickNameInput
            name="nickName"
            type="text"
            placeholder="Nickname"
            onChange={handleChange}
            value={values.nickName}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.nickName && <div>{errors.nickName}</div>}
        <InputWrapper>
          <PasswordInput
            name="password"
            type="password"
            placeholder="Enter your password"
            onChange={handleChange}
            value={values.password}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.password && <div>{errors.password}</div>}
        <SubmitBtn>Create An Account</SubmitBtn>
      </RegisterForm>
    </RegisterPageContainer>
  );
}

Answer 1

e.preventDefault()是为了防止表单进行http调用。如果您不在表单提交中使用它，则每次提交表单时页面都会刷新。

当值为空或任何其他内容时，它确实与阻止提交无关。您必须自己编写验证逻辑。

您的 registerAccount 函数将在您每次点击提交时触发。 e.preventDefault()不会阻止它。

在 event.preventDefault 之后提交表单（event.preventDefault 行为）

Submit a form after event.preventDefault (event.preventDefault behavior)

javascript

preventdefault