react如何校验表单
表单校验的基本方法
React中表单校验可以通过多种方式实现，包括内置的HTML5校验、自定义校验逻辑或第三方库。以下是几种常见方法：
使用HTML5内置校验属性
在表单元素上添加required、pattern等HTML5属性实现基础校验：
<input
type="email"
required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
/>手动校验状态管理 通过React的state和事件处理器实现自定义校验：
const [errors, setErrors] = useState({});
const validate = () => {
const newErrors = {};
if (!formData.username) newErrors.username = 'Required';
if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Invalid email';
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};第三方库解决方案
Formik + Yup组合 Formik处理表单状态，Yup提供声明式校验规则：
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string().min(8, 'Too short').required('Required')
});
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={validationSchema}
>
{({ errors, touched }) => (
<Form>
<Field name="email" />
{touched.email && errors.email && <div>{errors.email}</div>}
</Form>
)}
</Formik>React Hook Form 轻量级库，支持高性能校验：
const { register, handleSubmit, formState: { errors } } = useForm();
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register('email', { required: true, pattern: /^\S+@\S+$/i })} />
{errors.email?.type === 'required' && <span>Required</span>}
</form>实时校验与提交校验
实时校验（onChange） 在输入变化时立即触发校验：
<input
onChange={(e) => {
setValue(e.target.value);
if (!e.target.value) setError('Cannot be empty');
}}
/>提交时校验（onSubmit） 仅在表单提交时执行完整校验：
const handleSubmit = (e) => {
e.preventDefault();
const isValid = validateAllFields();
if (!isValid) return;
// 提交逻辑
};错误提示展示
错误信息通常与表单字段绑定显示：
<div className="form-group">
<label>Username</label>
<input type="text" {...register('username', { required: true })} />
{errors.username && <span className="error">This field is required</span>}
</div>CSS样式示例：
.error {
color: red;
font-size: 0.8em;
}
.form-group {
margin-bottom: 1rem;
}复杂校验场景处理
异步校验 处理需要服务器验证的情况：
const validateEmail = async (value) => {
const response = await fetch(`/api/check-email?email=${value}`);
return response.ok ? true : 'Email already exists';
};
<input {...register('email', { validate: validateEmail })} />交叉字段校验 比较多个字段值（如密码确认）：
const validationSchema = Yup.object().shape({
password: Yup.string().required(),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
});
