如何为React表单输入框添加约束并在下方显示提示信息

你可以通过以下步骤实现自定义验证提示：

1. 添加错误状态
   在组件中新增一个状态用于存储各字段的错误信息：

const [errors, setErrors] = useState({});

2. 改造提交处理函数
   修改handleButton，先阻止表单默认提交行为，然后手动验证所有字段并收集错误信息：

const handleButton = (e) => {
  e.preventDefault();
  const newErrors = {};

  // 验证文件字段
  if (!file) {
    newErrors.file = "请选择一个文件";
  }

  // 验证名称字段（对应placeholder为estate的输入框）
  if (!name || name.length < 10) {
    newErrors.name = "名称长度不能少于10个字符";
  }

  // 验证描述字段
  if (!description) {
    newErrors.description = "请填写描述信息";
  }

  // 验证房产信息字段（对应placeholder为name的输入框）
  if (!estate) {
    newErrors.estate = "请填写房产信息";
  }

  // 如果有错误，更新状态并终止提交流程
  if (Object.keys(newErrors).length > 0) {
    setErrors(newErrors);
    return;
  }

  // 无错误时执行原有提交逻辑（比如发送请求、更新状态）
  setCheck(true);
};

3. 渲染错误提示
   在表单按钮下方添加错误提示区域，遍历错误信息进行展示：

{Object.keys(errors).length > 0 && (
  <div style={{ color: "red", marginTop: "10px" }}>
    {Object.values(errors).map((err, index) => (
      <p key={index}>{err}</p>
    ))}
  </div>
)}

4. 完整修改后的代码

import { useState } from "react";
import Submitted from "./Submitted";

const AllPost = () => {
  const [file, setFile] = useState(null);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [estate, setEstate] = useState("");
  const [check, setCheck] = useState(false);
  const [errors, setErrors] = useState({});

  const handleButton = (e) => {
    e.preventDefault();
    const newErrors = {};

    if (!file) {
      newErrors.file = "请选择一个文件";
    }
    if (!name || name.length < 10) {
      newErrors.name = "名称长度不能少于10个字符";
    }
    if (!description) {
      newErrors.description = "请填写描述信息";
    }
    if (!estate) {
      newErrors.estate = "请填写房产信息";
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // 执行提交逻辑，比如发送API请求
    console.log("提交数据：", { file, name, description, estate });
    setCheck(true);
  };

  return (
    <div className="form-container">
      <form onSubmit={handleButton} className="form">
        <h2 style={{ fontSize: "30px", fontWeight: 600 }}>
          Start Posting your real estate
        </h2>
        <p style={{ fontSize: "20px", fontWeight: 400, letterSpacing: 1 }}>
          start adding basic details
        </p>{" "}
        <br />
        <input
          type="file"
          onChange={(e) => {
            setFile(e.target.files[0]);
            // 选择文件后清除对应错误提示
            if (errors.file) setErrors(prev => ({ ...prev, file: undefined }));
          }}
        />
        <br /> <br />
        <input
          type="text"
          onChange={(e) => {
            setName(e.target.value);
            // 输入内容后清除对应错误提示
            if (errors.name) setErrors(prev => ({ ...prev, name: undefined }));
          }}
          placeholder="estate"
        />
        <br /> <br />
        <input
          className="textarea"
          type="text"
          onChange={(e) => {
            setDescription(e.target.value);
            // 输入内容后清除对应错误提示
            if (errors.description) setErrors(prev => ({ ...prev, description: undefined }));
          }}
          placeholder="description"
        />
        <br /> <br />
        <input
          type="text"
          onChange={(e) => {
            setEstate(e.target.value);
            // 输入内容后清除对应错误提示
            if (errors.estate) setErrors(prev => ({ ...prev, estate: undefined }));
          }}
          placeholder="name"
        />
        <br /> <br />
        <button className="button-3" type="submit">
          Post
        </button>
        {/* 错误提示区域 */}
        {Object.keys(errors).length > 0 && (
          <div style={{ color: "red", marginTop: "10px" }}>
            {Object.values(errors).map((err, index) => (
              <p key={index}>{err}</p>
            ))}
          </div>
        )}
        {check && <Submitted />}
      </form>
    </div>
  );
};

export default AllPost;

额外优化 #

在每个输入框的onChange事件中添加了清除对应错误的逻辑，用户修正内容时提示会实时消失，提升交互体验。

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