React JS表单验证未按预期生效，提交偶尔跳过校验规则求助

• 初始表单状态未设置默认空值，默认值为undefined：正则的test()方法会自动将非字符串参数转为字符串，undefined会被转换为"undefined"，刚好符合你设置的公司名校验规则（2-12位纯字母），导致空输入也能通过正则校验，这是校验偶尔跳过的核心原因
• 校验逻辑顺序错误：先执行正则校验、后执行空值判断，空输入的场景已经在正则阶段被误判为通过，后续的空值判断完全失效
• 错误提示状态未重置：用户第一次输入错误触发提示后，就算后续输入正确，companyValidate/emailValidate也不会自动变回false，导致错误提示一直残留
• 提交逻辑绑定位置不合理：同时绑定了form的onSubmit和按钮的onClick，可能触发重复执行或默认提交行为异常

你可以按照以下步骤修改代码即可解决问题：

1. 初始化所有表单state的默认值为空字符串

// 表单state全部初始化为空字符串，避免undefined导致的正则误判
const [company, setCompany] = useState("");
const [companyValue, setCompanyValue] = useState("");
const [name, setName] = useState("");
const [nameValue, setNameValue] = useState("");
const [phone, setPhone] = useState("");
const [phoneValue, setPhoneValue] = useState("");
const [email, setEmail] = useState("");
const [emailValue, setEmailValue] = useState("");
// 其余状态保留原有初始化逻辑即可

2. 调整校验逻辑顺序，先重置错误状态、再校验非空、最后执行正则校验

const onClick = (e) => {
  e.preventDefault(); // 提前阻止默认提交行为
  // 先重置所有错误状态，避免旧错误残留
  setCompanyValidate(false);
  setEmailValidate(false);

  // 先校验所有字段非空
  if (company.trim() === "" || name.trim() === "" || phone.trim() === "" || email.trim() === "") {
    return;
  }

  const reCompanyName = /^[a-zA-Z]{2,12}$/;
  const reEmail = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;

  if (!reCompanyName.test(company)) {
    setCompanyValidate(true);
    return;
  }
  if (!reEmail.test(email)) {
    setEmailValidate(true);
    return;
  }

  // 原有提交后的逻辑保持不变
  setCompanyValue(company);
  setNameValue(name);
  setPhoneValue(phone);
  setEmailValue(email);
  /* 清空输入框 */
  setCompany("");
  setName("");
  setPhone("");
  setEmail("");
  /* 切换展示状态 */
  setInput(false);
  setMessage(false);
  setSubMessage(false);
  setLine(true);
  setBtn(false);
  /* 提交5秒后重置所有状态 */
  setTimeout(() => {
    setInput(true);
    setMessage(true);
    setSubMessage(true);
    setLine(false);
    setBtn(true);
  }, 5000);
};

3. 可选优化：将提交逻辑统一放到onSubmit方法中，移除按钮的onClick绑定，避免行为冲突；另外组件名Showacase拼写错误，建议修正为Showcase避免引入不必要的引用错误。

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