react实现表单验证
使用 React Hook Form 进行表单验证
React Hook Form 是一个轻量级的表单库，提供了高性能的表单验证功能。安装依赖：
npm install react-hook-form基本用法示例：
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name', { required: true })} />
{errors.name && <span>This field is required</span>}
<input {...register('age', { pattern: /\d+/ })} />
{errors.age && <span>Please enter number</span>}
<input type="submit" />
</form>
);
}使用 Yup 进行复杂验证
结合 Yup 可以实现更复杂的验证规则。安装依赖：
npm install @hookform/resolvers yup示例代码：
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
const schema = yup.object().shape({
name: yup.string().required(),
age: yup.number().positive().integer(),
email: yup.string().email()
});
function App() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema)
});
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register('name')} />
{errors.name && <p>{errors.name.message}</p>}
<input {...register('age')} />
{errors.age && <p>{errors.age.message}</p>}
</form>
);
}自定义验证逻辑
可以直接在 register 方法中定义验证规则：
<input
{...register('password', {
validate: value =>
value.length >= 6 || 'Password must be at least 6 characters'
})}
/>
{errors.password && <p>{errors.password.message}</p>}表单状态管理
React Hook Form 提供了多种表单状态：
const {
isDirty, // 表单是否被修改
isValid, // 表单是否有效
isSubmitting, // 表单是否正在提交
touchedFields, // 被触摸过的字段
submitCount // 提交次数
} = formState;动态表单字段验证
对于动态生成的表单字段，可以使用 Controller 组件：
import { Controller } from 'react-hook-form';
<Controller
name="test"
control={control}
render={({ field }) => <input {...field} />}
/>错误消息显示优化
可以创建统一的错误显示组件：
function ErrorMessage({ errors, name }) {
return errors[name] ? (
<p className="error">{errors[name].message}</p>
) : null;
}
// 使用方式
<ErrorMessage errors={errors} name="email" />
