如何创建可复用的ReactJS共享表单验证组件？

当然可以！这其实是React项目里解决表单冗余的典型场景，完全能把重复的字段、验证逻辑抽成共享组件/工具，彻底避免代码复制粘贴。我给你分享几个实用的实现思路：

把姓名、电话、邮箱这些重复字段各自封装成独立组件，每个组件内置自己的验证逻辑，同时对外暴露必要的props（比如值、 onChange回调、错误提示等），让不同表单直接复用。

举个EmailField的例子：

// components/FormFields/EmailField.jsx
import { useState } from 'react';

export default function EmailField({ value, onChange, label = "邮箱" }) {
  const [error, setError] = useState('');

  const validateEmail = (email) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!email) return "邮箱不能为空";
    if (!regex.test(email)) return "请输入有效的邮箱地址";
    return '';
  };

  const handleChange = (e) => {
    const inputValue = e.target.value;
    onChange(inputValue);
    setError(validateEmail(inputValue));
  };

  return (
    <div className="form-group">
      <label>{label}</label>
      <input
        type="email"
        value={value}
        onChange={handleChange}
        className={error ? "input-error" : ""}
      />
      {error && <span className="error-message">{error}</span>}
    </div>
  );
}

然后在员工表单和客户表单里直接用：

// components/EmployeeForm.jsx
import EmailField from './FormFields/EmailField';
import NameField from './FormFields/NameField';
import PhoneField from './FormFields/PhoneField';
import { useState } from 'react';

export default function EmployeeForm() {
  const [employee, setEmployee] = useState({ name: '', phone: '', email: '' });

  const handleNameChange = (value) => setEmployee(prev => ({ ...prev, name: value }));
  const handlePhoneChange = (value) => setEmployee(prev => ({ ...prev, phone: value }));
  const handleEmailChange = (value) => setEmployee(prev => ({ ...prev, email: value }));

  return (
    <form>
      <NameField value={employee.name} onChange={handleNameChange} label="员工姓名" />
      <PhoneField value={employee.phone} onChange={handlePhoneChange} label="员工电话" />
      <EmailField value={employee.email} onChange={handleEmailChange} label="员工邮箱" />
      {/* 员工表单独有的字段 */}
      <div className="form-group">
        <label>员工工号</label>
        <input type="text" value={employee.id} onChange={(e) => setEmployee(prev => ({ ...prev, id: e.target.value }))} />
      </div>
      <button type="submit">提交员工信息</button>
    </form>
  );
}

客户表单的用法几乎一样，只需要替换独有的字段就行，完全不用重复写验证逻辑。

如果不想每个字段都做成组件，也可以把验证逻辑单独放在一个工具文件里，让各个表单组件导入复用。

比如创建一个utils/formValidators.js：

// utils/formValidators.js
export const validateName = (name) => {
  if (!name.trim()) return "姓名不能为空";
  if (name.length > 50) return "姓名不能超过50个字符";
  return '';
};

export const validatePhone = (phone) => {
  const regex = /^1[3-9]\d{9}$/;
  if (!phone) return "电话不能为空";
  if (!regex.test(phone)) return "请输入有效的手机号";
  return '';
};

export const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!email) return "邮箱不能为空";
  if (!regex.test(email)) return "请输入有效的邮箱地址";
  return '';
};

然后在表单里导入使用：

import { useState } from 'react';
import { validateName, validatePhone } from '../utils/formValidators';

function SomeForm() {
  const [values, setValues] = useState({ name: '', phone: '' });
  const [errors, setErrors] = useState({});

  const handleNameBlur = (e) => {
    const name = e.target.value;
    setErrors(prev => ({ ...prev, name: validateName(name) }));
  };

  return (
    <div className="form-group">
      <label>姓名</label>
      <input
        type="text"
        value={values.name}
        onChange={(e) => setValues(prev => ({ ...prev, name: e.target.value }))}
        onBlur={handleNameBlur}
        className={errors.name ? "input-error" : ""}
      />
      {errors.name && <span className="error-message">{errors.name}</span>}
    </div>
  );
}

这种方式适合字段UI差异不大，但需要灵活控制验证时机的场景。

如果你的表单不仅字段重复，连表单提交、错误状态管理的逻辑都很像，那自定义Hook会是更高效的方案。

比如写一个useFormValidation.js：

// hooks/useFormValidation.js
import { useState } from 'react';
import { validateName, validatePhone, validateEmail } from '../utils/formValidators';

export default function useFormValidation(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (fieldName, value) => {
    setValues(prev => ({ ...prev, [fieldName]: value }));
    // 实时验证
    validateField(fieldName, value);
  };

  const validateField = (fieldName, value) => {
    let error = '';
    switch(fieldName) {
      case 'name':
        error = validateName(value);
        break;
      case 'phone':
        error = validatePhone(value);
        break;
      case 'email':
        error = validateEmail(value);
        break;
      // 可以扩展其他字段的验证
      default:
        break;
    }
    setErrors(prev => ({ ...prev, [fieldName]: error }));
    return error;
  };

  const validateAll = () => {
    const newErrors = {};
    Object.keys(values).forEach(field => {
      newErrors[field] = validateField(field, values[field]);
    });
    setErrors(newErrors);
    // 返回是否所有字段都验证通过
    return Object.values(newErrors).every(err => !err);
  };

  return {
    values,
    errors,
    handleChange,
    validateAll
  };
}

然后在表单里使用这个Hook：

// components/CustomerForm.jsx
import useFormValidation from '../hooks/useFormValidation';

export default function CustomerForm() {
  const { values, errors, handleChange, validateAll } = useFormValidation({
    name: '',
    phone: '',
    email: '',
    // 客户独有的字段
    address: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const isValid = validateAll();
    if (isValid) {
      // 提交表单逻辑
      console.log('客户信息提交：', values);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label>客户姓名</label>
        <input
          type="text"
          value={values.name}
          onChange={(e) => handleChange('name', e.target.value)}
          className={errors.name ? "input-error" : ""}
        />
        {errors.name && <span className="error-message">{errors.name}</span>}
      </div>
      {/* 电话、邮箱字段同理 */}
      <div className="form-group">
        <label>客户地址</label>
        <input
          type="text"
          value={values.address}
          onChange={(e) => handleChange('address', e.target.value)}
        />
      </div>
      <button type="submit">提交客户信息</button>
    </form>
  );
}

这种方式能把表单的状态管理、验证逻辑完全复用，非常适合多个相似表单的场景。

另外，如果某些字段在不同表单里有细微差异（比如客户电话允许国际区号，员工只支持国内手机号），可以给组件或者Hook加配置项，比如给PhoneField加一个allowInternational的props，在验证逻辑里根据这个配置调整正则，灵活性拉满。

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