当前位置：首页 > React

react如何校验表单

2026-02-11 22:48:17React

表单校验的基本方法

React中表单校验可以通过多种方式实现，包括内置的HTML5校验、自定义校验逻辑或第三方库。以下是几种常见方法：

使用HTML5内置校验属性 在表单元素上添加required、pattern等HTML5属性实现基础校验：

<input 
  type="email" 
  required 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
/>

手动校验状态管理 通过React的state和事件处理器实现自定义校验：

const [errors, setErrors] = useState({});

const validate = () => {
  const newErrors = {};
  if (!formData.username) newErrors.username = 'Required';
  if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Invalid email';
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

第三方库解决方案

Formik + Yup组合 Formik处理表单状态，Yup提供声明式校验规则：

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(8, 'Too short').required('Required')
});

<Formik
  initialValues={{ email: '', password: '' }}
  validationSchema={validationSchema}
>
  {({ errors, touched }) => (
    <Form>
      <Field name="email" />
      {touched.email && errors.email && <div>{errors.email}</div>}
    </Form>
  )}
</Formik>

React Hook Form 轻量级库，支持高性能校验：

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

<form onSubmit={handleSubmit(data => console.log(data))}>
  <input {...register('email', { required: true, pattern: /^\S+@\S+$/i })} />
  {errors.email?.type === 'required' && <span>Required</span>}
</form>

实时校验与提交校验

实时校验（onChange） 在输入变化时立即触发校验：

<input
  onChange={(e) => {
    setValue(e.target.value);
    if (!e.target.value) setError('Cannot be empty');
  }}
/>

提交时校验（onSubmit） 仅在表单提交时执行完整校验：

const handleSubmit = (e) => {
  e.preventDefault();
  const isValid = validateAllFields();
  if (!isValid) return;
  // 提交逻辑
};

错误提示展示

错误信息通常与表单字段绑定显示：

<div className="form-group">
  <label>Username</label>
  <input type="text" {...register('username', { required: true })} />
  {errors.username && <span className="error">This field is required</span>}
</div>

CSS样式示例：

.error {
  color: red;
  font-size: 0.8em;
}
.form-group {
  margin-bottom: 1rem;
}

复杂校验场景处理

异步校验 处理需要服务器验证的情况：

const validateEmail = async (value) => {
  const response = await fetch(`/api/check-email?email=${value}`);
  return response.ok ? true : 'Email already exists';
};

<input {...register('email', { validate: validateEmail })} />

交叉字段校验 比较多个字段值（如密码确认）：

react如何校验表单

const validationSchema = Yup.object().shape({
  password: Yup.string().required(),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'Passwords must match')
});