react 如何触发表单的校验
触发表单校验的方法
在React中，表单校验通常通过受控组件或第三方库（如Formik、React Hook Form）实现。以下是常见的触发校验方式：
受控组件手动校验
通过状态管理错误信息，在提交或失去焦点时触发校验：
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleBlur = () => {
if (!email.includes('@')) {
setError('Invalid email');
} else {
setError('');
}
};
return (
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
onBlur={handleBlur}
/>
{error && <div>{error}</div>}
);使用Formik库
Formik提供validate或validationSchema属性自动触发表单校验：
<Formik
initialValues={{ email: '' }}
validate={values => {
const errors = {};
if (!values.email.includes('@')) {
errors.email = 'Invalid email';
}
return errors;
}}
onSubmit={values => console.log(values)}
>
{({ errors }) => (
<Form>
<Field name="email" />
{errors.email && <div>{errors.email}</div>}
<button type="submit">Submit</button>
</Form>
)}
</Formik>使用React Hook Form
通过register注册校验规则，handleSubmit触发校验：
const { register, handleSubmit, formState: { errors } } = useForm({
mode: 'onBlur' // 可设置为onChange/onSubmit
});
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input
{...register('email', {
required: true,
pattern: /^\S+@\S+$/i
})}
/>
{errors.email && <span>Invalid email</span>}
<button type="submit">Submit</button>
</form>
);校验触发时机配置
不同库支持多种触发模式：
- onBlur: 输入框失去焦点时校验
- onChange: 值变化时实时校验
- onSubmit: 提交表单时校验（默认行为）
- onTouched: 元素被交互后校验
在React Hook Form中可通过mode配置：
useForm({ mode: 'onBlur' });在Formik中可通过validateOnBlur/validateOnChange控制：
<Formik validateOnBlur={true} validateOnChange={false}>
