React中如何同时为多个未填写的必填输入框显示警告？

原生HTML5的required属性默认只会聚焦第一个未填写的必填字段并提示，要实现所有未填字段都显示警告，有两种实用方案：

方法一：手动批量验证（无需额外库） #

利用表单的elements集合批量遍历字段，结合React状态管理错误信息，不用逐个字段写验证逻辑：

import { useState } from 'react';

function MyForm() {
  // 存储各字段错误信息
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const newErrors = {};

    // 遍历所有表单元素，检查必填项
    Array.from(form.elements).forEach(element => {
      // 跳过提交按钮等非输入元素
      if (element.tagName === 'INPUT' && element.type !== 'submit') {
        if (element.hasAttribute('required') && !element.value.trim()) {
          newErrors[element.name] = '此字段不能为空';
          element.classList.add('error-border');
        } else {
          element.classList.remove('error-border');
        }
      }
    });

    if (Object.keys(newErrors).length === 0) {
      // 验证通过，执行提交
      form.submit();
    } else {
      setErrors(newErrors);
    }
  };

  return (
    <form method="post" name="Form" onSubmit={handleSubmit}>
      <div className="form-group">
        <input name="username" length="20" required placeholder="用户名" />
        {errors.username && <span className="error-tip">{errors.username}</span>}
      </div>
      <div className="form-group">
        <input name="email" length="20" required placeholder="邮箱" />
        {errors.email && <span className="error-tip">{errors.email}</span>}
      </div>
      <div className="form-group">
        <input name="phone" length="20" required placeholder="手机号" />
        {errors.phone && <span className="error-tip">{errors.phone}</span>}
      </div>
      <input type="submit" value="提交" />
    </form>
  );
}

export default MyForm;

配合简单样式强化视觉提示：

.error-border {
  border-color: #ff5252;
}
.error-tip {
  color: #ff5252;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

方法二：用表单验证库（适合长表单） #

如果表单字段多、验证规则复杂，用React Hook Form这类库能大幅简化代码，自动支持批量错误提示：

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 表单提交逻辑
  const onSubmit = (formData) => {
    console.log('提交数据:', formData);
    // 这里写实际提交代码
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <input 
          {...register('username', { required: '用户名不能为空' })}
          length="20" 
          placeholder="用户名" 
        />
        {errors.username && <span className="error-tip">{errors.username.message}</span>}
      </div>
      <div className="form-group">
        <input 
          {...register('email', { required: '邮箱不能为空' })}
          length="20" 
          placeholder="邮箱" 
        />
        {errors.email && <span className="error-tip">{errors.email.message}</span>}
      </div>
      <div className="form-group">
        <input 
          {...register('phone', { required: '手机号不能为空' })}
          length="20" 
          placeholder="手机号" 
        />
        {errors.phone && <span className="error-tip">{errors.phone.message}</span>}
      </div>
      <input type="submit" value="提交" />
    </form>
  );
}

export default MyForm;

这种方式不需要手动遍历字段，库会自动处理所有验证逻辑，提交时所有未填的必填字段都会同步显示错误提示。

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