React表单提交前邮箱验证bug修复：如何阻止无效邮箱提交？

我正在完成FEM的表单开发挑战，需要实现包含FirstName、LastName、Email、Password四个字段的表单，提交前需完成合法性校验。此前用原生JavaScript实现过该功能，改用React开发后遇到邮箱字段验证bug：当先正确填写前三个字段、留空Password，之后填写Password但输入无效Email时，表单会直接提交而不被拦截。

现有代码中handleSubmit函数的核心逻辑如下：

function handleSubmit(e) {
  e.preventDefault();

  if (!userName) {
    setUserNameField(false);
  } else {
    setUserNameField(true);
  }
  if (!lastName) {
    setLastNameField(false);
  } else {
    setLastNameField(true);
  }
  // check if email is valid or not
  const regex_pattern =
    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (regex_pattern.test(email)) {
    setEmailField(true);
  } else {
    setEmailField(false);
  }

  if (!password) {
    setPasswordField(false);
  } else {
    setPasswordField(true);
  }

  if (userName && lastName && emailField && password) {
    e.target.submit();
  }
}

问题原因 #

React的setState是异步操作，在handleSubmit中修改emailField状态后，立刻用emailField判断是否提交时，拿到的是状态更新前的旧值。例如之前邮箱有效时emailField为true，输入无效邮箱后执行setEmailField(false)，此时判断条件里的emailField还是true，导致错误放行表单提交。

修复方案 #

不依赖emailField状态做提交判断，而是先实时计算所有字段的校验结果，用这些结果同时更新状态和判断是否提交：

修改步骤 #

1. 将邮箱正则表达式移到组件外部，避免每次提交重复创建：

const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

2. 重写handleSubmit函数，先计算所有字段的校验有效性，再更新状态和判断提交：

function handleSubmit(e) {
  e.preventDefault();

  // 实时计算各字段校验结果
  const isUserNameValid = !!userName;
  const isLastNameValid = !!lastName;
  const isEmailValid = EMAIL_REGEX.test(email);
  const isPasswordValid = !!password;

  // 更新各字段的错误状态
  setUserNameField(isUserNameValid);
  setLastNameField(isLastNameValid);
  setEmailField(isEmailValid);
  setPasswordField(isPasswordValid);

  // 用实时校验结果判断是否提交表单
  if (isUserNameValid && isLastNameValid && isEmailValid && isPasswordValid) {
    e.target.submit();
  }
}

修复说明 #

通过实时计算校验结果并直接使用这些值做提交判断，完全规避了React异步状态更新的延迟问题，确保只有当所有字段（包括邮箱）都校验通过时，表单才会被提交，同时也能正确更新各字段的错误状态以显示提示信息。

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