如何实现表单验证规则，要求输入值非空且数值必须大于0？

实现方案 #

1. 调整输入框原生属性：将<input>的min属性从0改为1，从交互层面减少用户输入无效值的可能
2. 在提交函数中增加两层校验：先判断是否为空值，再判断数值是否大于0，校验不通过直接终止提交流程

修改后的完整代码 #

表单代码 #

<Form className="workout-form">
  <div className="form-row">
    <label className="form__label" value>Duration</label>
    <input 
      type='number' 
      value={duration} 
      min='1' 
      onChange={(e) => setDuration(e.target.value)} 
      className='duration' 
      placeholder="min" 
      required
    />
  </div>
  <button className="form-btn" onClick={submitWorkout}>Add Workout</button>
</Form>

提交函数校验逻辑 #

const submitWorkout = (e) => {
  // 阻止表单默认提交的页面刷新行为
  e.preventDefault()

  // 空值校验：排除空字符串、null、undefined、全空格等各类空值
  const trimmedVal = duration?.trim()
  if (!trimmedVal) {
    alert('请输入运动时长')
    return
  }

  // 数值合法性校验
  const durationNum = Number(trimmedVal)
  if (isNaN(durationNum) || durationNum <= 0) {
    alert('运动时长必须大于0')
    return
  }

  // 校验通过后执行你原本的提交逻辑
  // ...
}

注：如果不需要alert弹窗提示，可替换为项目内的全局提示组件。

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