React自定义表单验证Hook多表单兼容问题及优化需求

方案1：每个表单独立实例化useForm #

这是最直接的解决思路，让每个表单拥有独立的useForm状态和校验规则，互相完全隔离，不会出现跨表单校验的问题。

修改后的useForm Hook核心逻辑 #

import { useState, useCallback } from 'react';

function useForm(initialValues, validateRules) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  // 更新字段值，可选实时校验当前字段
  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
    if (validateRules[name]) {
      const error = validateRules[name](value);
      setErrors(prev => ({ ...prev, [name]: error }));
    }
  }, [validateRules]);

  // 提交时仅校验当前实例传入的规则字段
  const handleSubmit = useCallback((onSubmit) => async (e) => {
    e.preventDefault();
    const newErrors = {};
    Object.entries(validateRules).forEach(([field, rule]) => {
      const error = rule(values[field]);
      if (error) newErrors[field] = error;
    });
    setErrors(newErrors);
    if (Object.keys(newErrors).length === 0) {
      await onSubmit(values);
    }
  }, [values, validateRules]);

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

多表单使用示例 #

// 登录表单组件
function LoginForm() {
  // 仅传入登录相关的校验规则
  const { values, errors, handleChange, handleSubmit } = useForm(
    { email: '', password: '' },
    {
      email: (val) => !val ? '邮箱不能为空' : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) ? '邮箱格式错误' : '',
      password: (val) => !val ? '密码不能为空' : val.length < 6 ? '密码至少6位' : ''
    }
  );

  const onSubmit = async (data) => {
    console.log('登录提交:', data);
    // 执行登录逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>邮箱:</label>
        <input name="email" value={values.email} onChange={handleChange} />
        {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
      </div>
      <div>
        <label>密码:</label>
        <input name="password" type="password" value={values.password} onChange={handleChange} />
        {errors.password && <span style={{ color: 'red' }}>{errors.password}</span>}
      </div>
      <button type="submit">登录</button>
    </form>
  );
}

// 个人信息表单组件
function ProfileForm() {
  // 仅传入个人信息相关的校验规则
  const { values, errors, handleChange, handleSubmit } = useForm(
    { fName: '', lName: '' },
    {
      fName: (val) => !val ? '名不能为空' : '',
      lName: (val) => !val ? '姓不能为空' : ''
    }
  );

  const onSubmit = async (data) => {
    console.log('个人信息提交:', data);
    // 执行信息保存逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>名:</label>
        <input name="fName" value={values.fName} onChange={handleChange} />
        {errors.fName && <span style={{ color: 'red' }}>{errors.fName}</span>}
      </div>
      <div>
        <label>姓:</label>
        <input name="lName" value={values.lName} onChange={handleChange} />
        {errors.lName && <span style={{ color: 'red' }}>{errors.lName}</span>}
      </div>
      <button type="submit">保存信息</button>
    </form>
  );
}

// 页面同时渲染两个表单
function App() {
  return (
    <div>
      <h2>登录</h2>
      <LoginForm />
      <h2>个人信息</h2>
      <ProfileForm />
    </div>
  );
}

方案2：实现基于ref的字段注册（仿react-hook-form） #

如果希望像react-hook-form那样通过ref自动注册字段，仅校验已注册的字段，可以给useForm添加注册方法，让Hook只追踪被注册的字段及其规则。

修改后的useForm Hook（带ref注册） #

import { useState, useCallback, useRef } from 'react';

function useForm() {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const registeredFields = useRef(new Map()); // 存储已注册的字段和规则

  // 注册字段的ref方法
  const register = useCallback((fieldName, rules = {}) => {
    return {
      ref: (el) => {
        if (el) {
          // 初始化字段值
          setValues(prev => ({ ...prev, [fieldName]: el.value || '' }));
          registeredFields.current.set(fieldName, rules);
        } else {
          // 元素卸载时移除注册
          registeredFields.current.delete(fieldName);
        }
      },
      name: fieldName,
      onChange: (e) => {
        const value = e.target.value;
        setValues(prev => ({ ...prev, [fieldName]: value }));
        // 实时校验当前字段
        if (rules.validate) {
          const error = rules.validate(value);
          setErrors(prev => ({ ...prev, [fieldName]: error }));
        }
      }
    };
  }, []);

  // 提交时仅校验已注册的字段
  const handleSubmit = useCallback((onSubmit) => async (e) => {
    e.preventDefault();
    const newErrors = {};
    registeredFields.current.forEach((rules, fieldName) => {
      if (rules.validate) {
        const error = rules.validate(values[fieldName]);
        if (error) newErrors[fieldName] = error;
      }
    });
    setErrors(newErrors);
    if (Object.keys(newErrors).length === 0) {
      await onSubmit(values);
    }
  }, [values]);

  return { values, errors, register, handleSubmit };
}

使用示例 #

function LoginForm() {
  const { values, errors, register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    console.log('登录提交:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>邮箱:</label>
        <input 
          {...register('email', {
            validate: (val) => !val ? '邮箱不能为空' : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) ? '邮箱格式错误' : ''
          })}
        />
        {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
      </div>
      <div>
        <label>密码:</label>
        <input 
          type="password"
          {...register('password', {
            validate: (val) => !val ? '密码不能为空' : val.length < 6 ? '密码至少6位' : ''
          })}
        />
        {errors.password && <span style={{ color: 'red' }}>{errors.password}</span>}
      </div>
      <button type="submit">登录</button>
    </form>
  );
}

function ProfileForm() {
  const { values, errors, register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    console.log('个人信息提交:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>名:</label>
        <input 
          {...register('fName', {
            validate: (val) => !val ? '名不能为空' : ''
          })}
        />
        {errors.fName && <span style={{ color: 'red' }}>{errors.fName}</span>}
      </div>
      <div>
        <label>姓:</label>
        <input 
          {...register('lName', {
            validate: (val) => !val ? '姓不能为空' : ''
          })}
        />
        {errors.lName && <span style={{ color: 'red' }}>{errors.lName}</span>}
      </div>
      <button type="submit">保存信息</button>
    </form>
  );
}

方案3：提交时指定校验范围 #

如果不想改动Hook核心逻辑，可以在提交时手动指定需要校验的字段集合，让校验函数只处理这些字段。

修改后的useForm Hook和校验逻辑 #

// 全局校验规则集合
const allValidateRules = {
  email: (val) => !val ? '邮箱不能为空' : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) ? '邮箱格式错误' : '',
  password: (val) => !val ? '密码不能为空' : val.length < 6 ? '密码至少6位' : '',
  fName: (val) => !val ? '名不能为空' : '',
  lName: (val) => !val ? '姓不能为空' : ''
};

// 修改后的useForm Hook
function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  }, []);

  // 新增参数：需要校验的字段列表
  const handleSubmit = useCallback((onSubmit, fieldsToValidate) => async (e) => {
    e.preventDefault();
    const newErrors = {};
    fieldsToValidate.forEach(field => {
      if (allValidateRules[field]) {
        const error = allValidateRules[field](values[field]);
        if (error) newErrors[field] = error;
      }
    });
    setErrors(newErrors);
    if (Object.keys(newErrors).length === 0) {
      await onSubmit(values);
    }
  }, [values]);

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

使用示例 #

function LoginForm() {
  const { values, errors, handleChange, handleSubmit } = useForm({ email: '', password: '' });

  const onSubmit = async (data) => {
    console.log('登录提交:', data);
  };

  // 提交时指定仅校验email和password字段
  return (
    <form onSubmit={handleSubmit(onSubmit, ['email', 'password'])}>
      {/* 表单内容同前 */}
    </form>
  );
}

function ProfileForm() {
  const { values, errors, handleChange, handleSubmit } = useForm({ fName: '', lName: '' });

  const onSubmit = async (data) => {
    console.log('个人信息提交:', data);
  };

  // 提交时指定仅校验fName和lName字段
  return (
    <form onSubmit={handleSubmit(onSubmit, ['fName', 'lName'])}>
      {/* 表单内容同前 */}
    </form>
  );
}

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