react如何验证
表单验证方法
在React中验证表单数据通常使用以下几种方式：
内置HTML5验证
利用HTML5原生表单验证属性如required、pattern等，结合form.noValidate属性禁用浏览器默认提示，通过checkValidity()方法手动触发验证。
状态管理验证
通过React的useState或useReducer管理表单状态，在提交或输入时执行自定义验证逻辑，更新错误状态并反馈到UI。
第三方库验证
常用库如Formik、React Hook Form等提供完整的验证解决方案。React Hook Form通过register注册字段，handleSubmit处理提交，errors对象收集错误信息。
React Hook Form示例
安装React Hook Form：
npm install 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('username', {
required: '用户名必填',
minLength: { value: 3, message: '至少3个字符' }
})}
/>
{errors.username && <p>{errors.username.message}</p>}
<input type="submit" />
</form>
);
}Yup集成验证
结合Yup进行模式验证：
npm install @hookform/resolvers yup使用示例：
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
const schema = yup.object().shape({
email: yup.string().email().required(),
password: yup.string().min(8).required()
});
function Form() {
const { register, handleSubmit, errors } = useForm({
resolver: yupResolver(schema)
});
// ...表单结构
}自定义验证逻辑
对于复杂场景可编写自定义验证函数：
const validateAge = value =>
parseInt(value) >= 18 || '年龄需满18岁';
<input
{...register('age', { validate: validateAge })}
/>实时验证策略
通过mode配置决定验证触发时机：
useForm({
mode: 'onChange' // 也可设为'onBlur'或'onSubmit'
})
