如何为触发验证错误的指定输入字段设置错误验证提示

问题根源是你用了单个errorMsg状态存储错误信息，所有输入字段都共用这个状态，导致只要有一个字段触发错误，所有字段都会显示提示。要让错误提示只出现在对应字段下方，需要给每个字段分配独立的错误状态：

修改步骤 #

• 替换错误状态：把单个字符串类型的errorMsg改成对象类型，每个字段对应一个错误信息项
• 更新验证逻辑：输入变更时，只更新当前字段的错误状态，不影响其他字段
• 绑定对应错误提示：每个输入框下方只判断自身字段的错误信息是否存在

修改后的完整代码 #

import { useState } from 'react';

function YourFormComponent() {
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    email: "",
  });

  // 改成对象类型，每个字段对应独立错误
  const [errors, setErrors] = useState({
    firstName: "",
    lastName: "",
    email: "",
  });

  const handleItemChanged = (event) => {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });

    const regex = /^[A-Za-z0-9_-]{1,128}$/;
    // 只更新当前字段的错误信息
    setErrors(prev => ({
      ...prev,
      [name]: regex.test(value) ? "" : "The field is empty"
    }));
  };

  return(
    <div>
      <div>
        <label htmlFor="firstName">First Name</label>
        <div>
          <input
            type="text"
            name="firstName"
            onChange={handleItemChanged}
            autoComplete="off"
            value={user.firstName} {/* 绑定value，保证受控组件状态同步 */}
          />
          {/* 判断当前字段的错误 */}
          {errors.firstName && (
            <div className="text-color-error">
              <label htmlFor="firstName" className="block"></label>
              <div className="sm:col-span-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="inline-block mr-2 h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>{" "}
                {errors.firstName}
              </div>
            </div>
          )}
        </div>
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <div>
          <input
            type="text"
            name="lastName"
            onChange={handleItemChanged}
            autoComplete="off"
            value={user.lastName}
          />
          {/* 判断当前字段的错误 */}
          {errors.lastName && (
            <div className="text-color-error">
              <label htmlFor="lastName" className="block"></label>
              <div className="sm:col-span-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="inline-block mr-2 h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>{" "}
                {errors.lastName}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Email字段同理实现 */}
      <div>
        <label htmlFor="email">Email</label>
        <div>
          <input
            type="email"
            name="email"
            onChange={handleItemChanged}
            autoComplete="off"
            value={user.email}
          />
          {errors.email && (
            <div className="text-color-error">
              <label htmlFor="email" className="block"></label>
              <div className="sm:col-span-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="inline-block mr-2 h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>{" "}
                {errors.email}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default YourFormComponent;

额外优化说明：

• 给输入框加上value绑定，将组件改为受控组件，确保输入值与状态完全同步
• 修正了原代码中label的htmlFor属性，改为对应字段的id，保证语义正确性

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