React项目表单提交时校验逻辑出现异常问题求助

问题根因 #

1. 空提交优先弹出手机号错误 #

表单所有字段的useState初始化未传入默认值，初始状态为undefined，在校验时会被隐式转换为字符串"undefined"：

• 公司名校验正则/^[a-zA-Z](?:[^0-9\s\x00-\x1F]|[ \t]){1,79}$/可以匹配"undefined"，校验通过
• 姓名校验正则/[A-Za-z]{1,50}/也可以匹配"undefined"，校验通过
• 手机号正则无法匹配该字符串，因此触发手机号错误提示

2. 未填公司名也能提交 #

提交前的空值判断只匹配了空串company === ""，没有覆盖初始的undefined状态，未填公司名时该判断不触发，表单会直接走提交逻辑。

修复步骤 #

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

// 原写法
const [company, setCompany] = useState();
const [name, setName] = useState();
const [phone, setPhone] = useState();
const [email, setEmail] = useState();

// 修改后
const [company, setCompany] = useState("");
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [email, setEmail] = useState("");

2. 优化提交前的空值判断，覆盖空串、空格、undefined等无效输入

// 原判断
if (company === "" || phone === "" || email === "" || name === "") {
  return;
}

// 修改后
if (!company.trim() || !name.trim() || !phone.trim() || !email.trim()) {
  return;
}

3. （可选优化）在所有格式校验前先统一做非空校验，保证错误提示按表单从上到下的顺序触发：

// onClick函数最开头先加非空校验
if (!company.trim()) {
  setCompanyValidate(true);
  return;
}
if (!name.trim()) {
  setNameValidate(true);
  return;
}
if (!phone.trim()) {
  setPhoneValidation(true);
  return;
}
if (!email.trim()) {
  setEmailValidate(true);
  return;
}
// 再执行原来的正则格式校验逻辑

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