在 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}          />  );}

Answer 1

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

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

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