React JS Input onChange验证失效，数据库被空字符串更新求助

核心问题 #

你的验证逻辑失效、数据库被存入空字符串的原因是正则表达式允许空字符串：
原正则^[a-zA-Z]*$中的*表示「零次或多次匹配」，空字符串完全符合这个规则，会触发setName(e.target.value)将空值存入状态，最终同步到数据库。

修复步骤 #

1. 修正正则表达式
   将*替换为+（表示「一次或多次匹配」），确保只有非空的纯字母输入才能通过验证：

   onChange={(e) => {
     const inputValue = e.target.value;
     // 匹配至少一个大小写字母，拒绝空字符串
     if (/^[a-zA-Z]+$/.test(inputValue)) {
       setName(inputValue);
     } else {
       // 根据输入情况给出明确提示
       const errorMsg = inputValue === "" 
         ? "Name cannot be empty" 
         : "Please enter only letters (a-z, A-Z)";
       toast.error(errorMsg);
     }
   }}
   

2. 同步UI与状态（可选但推荐）
   原代码中输入非法字符时，输入框会显示非法内容但状态未更新，导致UI与state不一致。可以通过重置输入框值来限制非法输入：

   onChange={(e) => {
     const inputValue = e.target.value;
     const isValid = /^[a-zA-Z]+$/.test(inputValue);
     if (isValid) {
       setName(inputValue);
     } else {
       // 重置输入框为上一次合法的状态值
       e.target.value = name;
       const errorMsg = inputValue === "" 
         ? "Name cannot be empty" 
         : "Please enter only letters (a-z, A-Z)";
       toast.error(errorMsg);
     }
   }}
   

3. 提交环节二次校验
   为彻底避免空值或非法值存入数据库，建议在提交数据的函数中再次验证：

   const handleSubmit = async () => {
     // 双重校验：非空 + 格式合法
     if (!name || !/^[a-zA-Z]+$/.test(name)) {
       toast.error("Please enter a valid name (only letters allowed, cannot be empty)");
       return;
     }
     // 执行数据库更新逻辑
     // await updateDatabase(name);
   };
   

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