当前位置：首页 > React

react如何验证

2026-02-25 23:06:26React

验证表单输入

在React中验证表单输入通常使用受控组件结合验证逻辑。通过onChange事件更新状态，并在提交时检查状态值是否符合规则。

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

const handleSubmit = (e) => {
  e.preventDefault();
  if (!email.includes('@')) {
    setError('Invalid email');
    return;
  }
  // 提交逻辑
};

使用验证库

第三方库如yup或validator可简化验证流程。yup允许定义模式并通过schema.validate()进行验证。

import * as yup from 'yup';

const schema = yup.object().shape({
  email: yup.string().email().required(),
});

schema.validate({ email }).catch(err => {
  setError(err.errors[0]);
});

实时验证

在输入时实时验证提供即时反馈。结合onBlur和onChange事件确保用户体验。

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

表单库集成

Formik与yup集成提供完整的表单管理方案。Formik处理表单状态，yup处理验证规则。

import { Formik, Field, ErrorMessage } from 'formik';

<Formik
  initialValues={{ email: '' }}
  validationSchema={yup.object({ email: yup.string().email().required() })}
  onSubmit={(values) => console.log(values)}
>
  {({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="email" type="email" />
      <ErrorMessage name="email" component="div" />
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

自定义验证函数

对于复杂逻辑，创建自定义验证函数。函数返回错误消息或undefined表示验证通过。

const validatePassword = (value) => {
  if (value.length < 8) return 'Password too short';
  if (!/\d/.test(value)) return 'Include a number';
  return undefined;
};

服务端验证

前端验证需与后端验证结合。提交表单后处理API返回的错误信息，并更新UI。

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    await api.post('/register', { email });
  } catch (err) {
    setError(err.response.data.message);
  }
};

react如何验证