如何创建仅在输入非空且数值大于0时才允许提交的表单

现有代码问题 #

你当前的实现存在3个明显缺陷：

1. 校验逻辑只覆盖了输入值小于0的场景，没有处理空输入、输入等于0的情况
2. 输入小于0时仅弹出提示，没有返回有效值，会导致distance状态被赋值为undefined
3. 仅在输入变更时做校验，没有在提交环节做二次校验，存在被绕过的风险

修复后代码 #

1. 优化校验函数

const minValue = (input) => {
  // 先转换为数字，避免字符串比对的隐式转换坑
  const inputNum = Number(input)
  // 覆盖空值、非数字、小于等于0的所有非法场景
  if (!input || isNaN(inputNum) || inputNum <= 0) {
    alert('输入值不能为空且必须大于0')
    // 非法输入返回空，也可以根据需求返回上一次的有效值
    return ''
  }
  return inputNum
}

2. 新增提交环节校验

const submitWorkout = (e) => {
  // 阻止表单默认提交行为
  e.preventDefault()
  const distanceNum = Number(distance)
  // 提交前二次校验，避免被绕过
  if (!distance || isNaN(distanceNum) || distanceNum <= 0) {
    alert('请输入大于0的有效距离')
    return
  }
  // 原有提交逻辑写在这里
  // ...
}

3. 调整表单代码

<Form className="workout-form">
  <div className="form-row">
    <label className="form__label">Distance</label>
    <input 
      type='number' 
      value={distance}  
      min='1' // 原生输入框限制最小值为1，降低非法输入概率
      onChange={(e) => setDistance(minValue(e.target.value))} 
      className="form__input form__input--distance" 
      placeholder="mi"  
      autoFocus 
      required
    />
  </div>
  <button className="form-btn" type="submit" onClick={submitWorkout}>Add Workout</button>
</Form>

优化点说明 #

• 统一将输入值转为数字类型再判断，避免字符串和数字比对的异常问题
• 输入框min属性改为1，原生限制用户用选择器输入0或负数
• 提交环节新增二次校验，避免用户通过控制台修改状态等方式绕过输入校验
• 非法输入时明确返回空值，避免状态存入异常的undefined值

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