React JS中如何在表单对应输入框下方展示校验错误信息

1. 新增错误状态管理 #

首先在你的表单组件内新增一个errors状态对象，用来存储每个表单项对应的错误提示，初始值为空对象。

// 原有状态外新增
const [errors, setErrors] = useState({});

同时修改handle输入事件，用户输入时清空对应字段的错误提示，避免错误一直显示：

const handle = (e) => {
  const {name, value} = e.target;
  setData(prev => ({...prev, [name]: value}));
  // 输入时清空对应字段的错误
  if (errors[name]) {
    setErrors(prev => {
      const newErrors = {...prev};
      delete newErrors[name];
      return newErrors;
    })
  }
}

2. 解析服务端返回的错误并更新状态 #

在sendData请求逻辑中，拿到服务端返回的错误信息后，用正则提取字段名和错误内容，更新到errors状态中：

const sendData = async (e) => {
  e.preventDefault();
  setErrors({}); // 提交前先清空所有历史错误
  try {
    // 原有请求逻辑
    const res = await fetch('/your/api', {
      method: 'POST',
      body: JSON.stringify(data)
    })
    if (!res.ok) {
      const errData = await res.json();
      const errMsg = errData.message;
      // 正则匹配字段名和错误内容
      const reg = /ValidationError: (\w+): <strong>(.*?)<\/strong>/;
      const matchResult = errMsg.match(reg);
      if (matchResult) {
        const [_, fieldName, errorText] = matchResult;
        setErrors({[fieldName]: errorText})
      }
    }
  } catch (err) {
    // 其他异常处理
  }
}

3. 表单中对应输入框下方增加错误渲染 #

修改你的表单代码，在每个input标签的下方，判断对应字段是否有错误，有则展示错误提示：

<form>
  <h2>Create Account</h2>
  <fieldset>
    <label for="name">Username</label>
    <input
      onChange={(e) => handle(e)}
      value={data.name}
      type="text"
      id="name"
      name="name"
    />
    {/* 用户名错误提示 */}
    {errors.name && <span style={{color: '#f5222d', fontSize: '12px', display: 'block', margin: '4px 0 12px'}}>{errors.name}</span>}

    <label for="email">Email</label>
    <input
      onChange={(e) => handle(e)}
      value={data.email}
      type="email"
      id="email"
      name="email"
    />
    {/* 邮箱错误提示 */}
    {errors.email && <span style={{color: '#f5222d', fontSize: '12px', display: 'block', margin: '4px 0 12px'}}>{errors.email}</span>}

    <label for="password">Password</label>
    <input
      onChange={(e) => handle(e)}
      value={data.password}
      type="password"
      id="password"
      name="password"
    />
    {/* 密码错误提示 */}
    {errors.password && <span style={{color: '#f5222d', fontSize: '12px', display: 'block', margin: '4px 0 12px'}}>{errors.password}</span>}

    <label for="confirmPassword">Confirm Password</label>
    <input
      onChange={(e) => handle(e)}
      value={data.confirmPassword}
      type="password"
      id="confirmPassword"
      name="confirmPassword"
    />
    {/* 确认密码错误提示 */}
    {errors.confirmPassword && <span style={{color: '#f5222d', fontSize: '12px', display: 'block', margin: '4px 0 12px'}}>{errors.confirmPassword}</span>}
  </fieldset>
  <button type="submit" onClick={(e) => sendData(e)}>
    Create Account
  </button>
</form>

提示：你可以根据需求调整错误提示的样式，也可以将公共样式抽成CSS类名复用。如果服务端会同时返回多个字段的校验错误，只需要调整正则解析逻辑，把所有字段的错误都存入errors对象即可。

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