基于React Hooks开发带时长格式校验的电影录入表单求助

完整实现方案 #

你需要新增错误状态管理、补全校验规则、增加校验触发逻辑、条件渲染错误提示即可完成需求，以下是修改后的完整代码：

import { useState } from 'react'

function Movieform() {
  const [movies, handleChange] = useForm({name:'', rating: 0, duration: ''})
  // 新增错误状态，存储时长校验错误信息
  const [durationError, setDurationError] = useState('')

  // 补全时长校验函数
  const validateDuration = (input) => {
    // 正则匹配：数字（支持小数）+ h/m结尾，不区分大小写
    const durationReg = /^\d+(\.\d+)?[hm]$/i
    // 若时长为非必填项，可删除下方空值判断逻辑，空输入直接返回true即可
    if (!input.trim()) {
      setDurationError('时长不能为空')
      return false
    }
    if (durationReg.test(input.trim())) {
      setDurationError('')
      return true
    } else {
      setDurationError('请使用分钟或小时格式标注时长')
      return false
    }
  }

  // 表单提交逻辑
  const handleSubmit = (e) => {
    e.preventDefault()
    // 提交前先校验时长
    const isDurationValid = validateDuration(movies.duration)
    if (!isDurationValid) return
    // 校验通过后执行后续提交逻辑，比如调用接口保存数据等
    console.log('表单提交成功：', movies)
  }

  return (
    <section>
      <div className='card pa-30'>
        <form onSubmit={handleSubmit}>
          <div className='layout-column mb-15'>
            <label htmlFor='name' className='mb-3'>电影名称</label>
            <input
              type='text'
              id='name'
              name="name"
              value={movies.name}
              placeholder='请输入电影名称'
              onChange={handleChange}
            />
          </div>
         
          <div className='layout-column mb-30'>
            <label htmlFor='duration' className='mb-3'>时长</label>
            <input
              type='text'
              id='duration'
              name='duration'
              value={movies.duration}
              placeholder='请输入时长，如143m或2h'
              onChange={handleChange}
              // 失焦时触发校验
              onBlur={() => validateDuration(movies.duration)}
            />
          </div>
          {/* 条件渲染错误提示 */}
          {durationError && (
            <div
              className='alert error mb-30'
              data-testid='alert'
            >
              {durationError}
            </div>
          )}
          <div className='layout-row justify-content-end'>
            <button
              type='submit'
              className='mx-0'
              data-testid='addButton'
            >
              新增电影
            </button>
          </div>
          </form>
      </div>
    </section>
  )
}

export default Movieform

核心逻辑说明 #

• 校验用正则/^\d+(\.\d+)?[hm]$/i可覆盖所有合法格式：支持整数/小数开头，结尾只能是h（小时）或m（分钟），不区分大小写，143m、2h、2.5H、120M都可正常通过校验
• 支持两种校验触发时机：时长输入框失焦时自动校验、表单提交时全局校验，避免用户漏改错误格式
• 错误提示容器会根据校验结果自动显隐，符合你要求的交互逻辑
• 修复了原代码中输入框id缺失的问题，点击label可正常聚焦到对应输入框

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