React中submit提交事件添加IF校验逻辑不生效如何解决？

原代码存在的核心问题 #

• 空校验后没有终止逻辑执行，后续判断会覆盖空值提示
• 字符合法性校验逻辑完全错误：isNaN是判断函数不能直接做等值比较，也无法用单个输入值和运算符数组做等值判断
• 缺失操作数与运算符数量匹配的校验逻辑
• e.preventDefault()重复书写，逻辑冗余

修复思路 #

1. 统一先执行阻止默认提交行为，避免重复书写
2. 每一步校验失败后直接return终止后续逻辑，防止提示被覆盖
3. 用正则表达式校验输入是否仅包含数字和允许的算术运算符（+、-、*、/）
4. 拆分输入内容提取操作数和运算符，判断操作数数量是否等于运算符数量+1，不匹配则抛出错误
5. 所有校验通过后再执行计算赋值逻辑

修复后代码 #

// 提前定义允许的运算符，可按需扩展
const validOperators = ['+', '-', '*', '/'];
const handleSubmit = (e) => {
  // 统一阻止默认提交行为
  e.preventDefault();

  // 校验1：禁止空内容提交
  if (!inputValue.trim().length) {
    setResult("You did not enter anything!");
    return;
  }

  // 校验2：仅允许数字和算术运算符
  const validReg = /^[0-9+\-*/]+$/;
  if (!validReg.test(inputValue)) {
    setResult("only numbers and valid operators(+、-、*、/) are allowed!");
    return;
  }

  // 校验3：操作数与运算符数量匹配校验
  // 拆分运算符
  const operators = inputValue.split('').filter(char => validOperators.includes(char));
  // 拆分操作数，过滤掉空字符串（避免开头结尾是运算符的情况）
  const operands = inputValue.split(/[+\-*/]/).filter(item => item.length);
  if (operands.length !== operators.length + 1) {
    setResult("The number of operands and operators does not match!");
    return;
  }

  // 所有校验通过，执行计算逻辑
  // 注意：实际生产环境不要直接用eval，这里仅做示例，可替换为自己的计算逻辑
  const solution = eval(inputValue);
  setResult(solution);
  setInputValue("");
}

注意事项 #

• 示例中用eval做计算仅为简化演示，生产环境建议使用专门的表达式计算库或者自己实现解析逻辑，避免代码注入风险
• 如果需要支持小数输入，可以把正则调整为/^[0-9.+\-*/]+$/，同时额外补充小数点合法性校验，避免出现多个小数点的非法输入

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