JavaScript表单输入验证问题：不符合规则的输入仍被添加至列表

核心问题 #

你的代码里validateSearch只负责设置错误提示，但没有返回验证是否通过的状态；而且addEmployeeToList调用validateSearch后，不管验证结果如何都会执行添加员工的操作，导致验证不通过时数据也被加入列表。另外，你写的清空输入代码在return之后，永远不会执行。

修改步骤 #

1. 让validateSearch返回布尔值，明确验证是否通过
2. 在addEmployeeToList中根据验证结果决定是否添加员工
3. 调整清空输入的逻辑，确保验证通过后才执行

修改后的代码 #

1. 调整验证函数

const validateSearch = () => {
  // 检查所有验证规则
  const hasError = (firstName.length === 0) || 
                   (lastName.length === 0) || 
                   (age.length === 0) || 
                   (!isNumber(age) || age > 10);
  
  setErrorMessage(hasError); // 直接根据是否有错误设置状态，避免取反导致的状态混乱
  return !hasError; // 返回验证是否通过：无错误则返回true
}

2. 修改添加员工的函数

const addEmployeeToList = () => {
  const isValid = validateSearch();
  if (!isValid) {
    return; // 验证不通过，直接退出函数
  }
  
  // 验证通过，添加员工
  const newEmployee = [{firstName, lastName, age}];
  setEmployees(employee => [...employee, ...newEmployee]);
  
  // 清空输入框
  setfirstName("");
  setlastName("");
  setage("");  
}

原状态定义保留

const [firstName, setfirstName] = useState("")
const [lastName, setlastName] = useState("")
const [age, setage] = useState("")

额外说明 #

• 确保isNumber函数能正确判断age是否为有效数字（比如处理空字符串、非数字字符的情况），如果是自定义函数要确认逻辑无问题

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