react如何校验表单

表单校验的基本方法

React 表单校验可以通过多种方式实现，常见的有受控组件结合状态管理、第三方库如 Formik 或 React Hook Form，以及 HTML5 原生校验属性。

使用受控组件和状态管理是最基础的方式，通过监听输入变化并更新状态，同时在提交时检查状态是否符合要求。

import { useState } from 'react';

function Form() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) {
      setError('Invalid email');
      return;
    }
    setError('');
    console.log('Form submitted:', email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

使用 React Hook Form

React Hook Form 是一个轻量级库，提供了高性能的表单校验功能，无需重复渲染。

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

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

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address',
          },
        })}
      />
      {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

使用 Formik 和 Yup

Formik 结合 Yup 可以方便地定义复杂的校验规则，适合需要大量表单校验的场景。

import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string()
    .email('Invalid email address')
    .required('Required'),
});

function Form() {
  const formik = useFormik({
    initialValues: { email: '' },
    validationSchema,
    onSubmit: (values) => {
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="email"
        name="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email && (
        <p style={{ color: 'red' }}>{formik.errors.email}</p>
      )}
      <button type="submit">Submit</button>
    </form>
  );
}

HTML5 原生校验

HTML5 提供了一些原生校验属性，如 required、pattern 等，适合简单的校验需求。

function Form() {
  return (
    <form>
      <input
        type="email"
        required
        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

自定义校验函数

对于复杂校验逻辑，可以自定义校验函数并在提交或输入时调用。

function validateEmail(email) {
  const re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  return re.test(email);
}

function Form() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleBlur = () => {
    if (!validateEmail(email)) {
      setError('Invalid email');
    } else {
      setError('');
    }
  };

  return (
    <form>
      <input
        type="text"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        onBlur={handleBlur}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

实时校验

通过监听输入变化实现实时校验，提升用户体验。

function Form() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    if (value && !value.includes('@')) {
      setError('Invalid email');
    } else {
      setError('');
    }
  };

  return (
    <form>
      <input
        type="text"
        value={email}
        onChange={handleChange}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}