React.js 中如何处理表单验证

在 React.js 中处理表单验证有多种方法，下面介绍两种常用的方法：

1. 受控组件（Controlled Components）： 受控组件是指其值由 React 状态管理的表单元素。要实现表单验证，需要在组件的状态中存储表单字段的值和错误信息，并在用户输入时更新这些状态。以下是一个简单的示例：

import React, { useState } from 'react';

function Form() {
  const [values, setValues] = useState({
    username: '',
    email: '',
  });
  const [errors, setErrors] = useState({});

  const validate = () => {
    let tempErrors = {};
    if (!values.username) {
      tempErrors.username = '用户名不能为空';
    }
    if (!values.email) {
      tempErrors.email = '邮箱不能为空';
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      tempErrors.email = '邮箱格式不正确';
    }
    setErrors(tempErrors);
  };

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

  const handleSubmit = (e) => {
    e.preventDefault();
    validate();
    if (Object.keys(errors).length === 0) {
      console.log('表单提交成功:', values);
    } else {
      console.log('表单验证失败:', errors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {errors.username && <p style={{ color: 'red' }}>{errors.username}</p>}
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default Form;

2. 使用第三方库： 有许多第三方库可以帮助您更轻松地处理表单验证，例如 Formik 和 React Hook Form。这些库提供了一些有用的功能，如表单状态管理、验证规则和错误处理。以下是使用 Formik 的一个简单示例：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const validate = (values) => {
  let errors = {};
  if (!values.username) {
    errors.username = '用户名不能为空';
  }
  if (!values.email) {
    errors.email = '邮箱不能为空';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = '邮箱格式不正确';
  }
  return errors;
};

function FormWithFormik() {
  return (
    <Formik
      initialValues={{ username: '', email: '' }}
      validate={validate}
      onSubmit={(values, actions) => {
        console.log('表单提交成功:', values);
        actions.setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label>用户名：</label>
            <Field name="username" />
            <ErrorMessage name="username" component="p" style={{ color: 'red' }} />
          </div>
          <div>
            <label>邮箱：</label>
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="p" style={{ color: 'red' }} />
          </div>
          <button type="submit" disabled={isSubmitting}>
            提交
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default FormWithFormik;

这些方法可以帮助您在 React.js 中处理表单验证。您可以根据项目需求选择合适的方法。