React表单空输入提交时如何向用户展示错误提示

原有代码问题 #

• 声明的inputValiderin校验函数无实际执行逻辑，仅做了空声明
• 校验判断逻辑错误：读取函数的length属性只能拿到函数形参个数，无法判断字段是否为空
• 错误提示渲染逻辑存在语法错误，提示文案无法正常展示
• 缺少校验不通过时的提交拦截逻辑

修正后完整代码 #

Form组件（表单输入+前端校验逻辑） #

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

export default function Form({ loading, onSubmit }) {
  const [title, setTitle] = useState('')
  const [slug, setSlug] = useState('')
  const [preAmble, setPreAmble] = useState('')
  const [slogan, setSlogan] = useState('')
  const [box, setBox] = useState('')
  const [formError, setFormError] = useState('')
  const navigate = useNavigate()

  // 必填项校验逻辑
  const validateRequired = () => {
    // 数组内加入所有需要校验的必填字段，当前已渲染的必填项为title、slug
    const requiredList = [title, slug]
    return requiredList.every(item => item.trim() !== '')
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    setFormError('')
    // 校验不通过时拦截提交，展示提示
    if (!validateRequired()) {
      setFormError('YOU HAVE TO FILL ALL REQUIRED FIELDS')
      return
    }
    await onSubmit({ title, slug, preAmble, slogan, box })
    navigate('/')
  }

  return (
    <>
      <h2 className="m-10 text-xl font-bold">Ny tjeneste</h2>
      <form
        className="ml-10 flex flex-col"
        onSubmit={handleSubmit}
        method="POST"
      >
        {/* 前端校验错误提示 */}
        {formError && (
          <p className="text-red-600 font-medium mb-4">{formError}</p>
        )}
        <label htmlFor="title" className="my-6 flex flex-col">
          <span className="font-bold">Tittel*</span>
          <input
            className="w-1/2 rounded-lg bg-gray-100 p-2"
            onChange={(event) => setTitle(event.target.value)}
            value={title}
            data-testid="form_title"
            type="text"
            name="title"
            id="title"
          />
        </label>
        <label htmlFor="slug" className="my-3 flex flex-col">
          <span className="font-bold">Slug*</span>
          <input
            className="w-1/2 rounded-lg bg-gray-100 p-2"
            onChange={(event) => setSlug(event.target.value)}
            value={slug}
            data-testid="form_slug"
            type="text"
            name="slug"
            id="slug"
          />
        </label>
        {/* 若preAmble、slogan、box为需要收集的字段，在此处补全对应输入框即可，同时将字段加入上方requiredList做校验 */}
        <button
          className="float-left w-1/4 rounded-lg bg-green-700 py-2 font-medium text-white disabled:bg-gray-400"
          type="submit"
          disabled={loading}
        >
          {loading ? 'Sender...' : 'Lag skjema'}
        </button>
      </form>
    </>
  )
}

Create主组件（状态管理+接口提交逻辑） #

import { useState } from 'react'
import Form from '../components/Form'
import { sendForm } from '../lib/sendForm'

export default function Create() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)

  const onSubmit = async (data) => {
    setLoading(true)
    setError('')
    setSuccess(false)

    try {
      await sendForm(data)
      setSuccess(true)
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      <Form loading={loading} onSubmit={onSubmit} />
      {success && (
        <p className="m-10 text-2xl font-semibold text-green-700">Skjema er sendt</p>
      )}
      {error && (
        <p className="m-10 text-red-600 font-medium">{error}</p>
      )}
    </>
  )
}

补充说明 #

• 校验逻辑增加了trim()处理，避免用户输入全空格绕过非空校验
• 提交按钮增加了加载态禁用逻辑，防止用户重复触发提交
• 每次提交前会清空历史错误提示，避免旧提示残留
• 若后续需要新增必填字段，只需将对应字段值加入requiredList数组，并在表单中渲染对应输入控件即可

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