react如何校验表单
表单校验的基本方法
在React中校验表单可以通过多种方式实现，包括内置HTML5验证、自定义JavaScript逻辑或第三方库。以下是几种常见方法：
使用HTML5内置验证
HTML5提供了一些原生表单验证属性，如required、pattern、min、max等。这些可以直接在表单元素上使用：
<input
type="text"
required
pattern="[A-Za-z]{3}"
title="3个字母"
/>手动校验 通过状态管理和事件处理实现校验逻辑：
const [errors, setErrors] = useState({});
const validate = () => {
const newErrors = {};
if (!formData.username) newErrors.username = '用户名必填';
if (formData.password.length < 6) newErrors.password = '密码至少6位';
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};使用Formik+Yup校验
Formik是流行的表单管理库，配合Yup可以高效实现校验：
import { Formik, Field, Form } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
email: Yup.string().email('无效邮箱').required('必填'),
password: Yup.string().min(8, '太短').required('必填')
});
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={validationSchema}
onSubmit={values => console.log(values)}
>
{({ errors, touched }) => (
<Form>
<Field name="email" type="email" />
{errors.email && touched.email && <div>{errors.email}</div>}
<Field name="password" type="password" />
{errors.password && touched.password && <div>{errors.password}</div>}
<button type="submit">提交</button>
</Form>
)}
</Formik>React Hook Form校验
React Hook Form是另一个高性能表单库：
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit, formState: { errors } } = useForm({
defaultValues: { username: '' }
});
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input
{...register('username', {
required: '必填项',
minLength: { value: 3, message: '至少3字符' }
})}
/>
{errors.username && <p>{errors.username.message}</p>}
<input type="submit" />
</form>
);
}实时校验实现
要实现输入时实时校验，可以结合onChange事件：
const [values, setValues] = useState({});
const [errors, setErrors] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setValues({...values, [name]: value});
// 实时校验逻辑
if (name === 'email' && !/\S+@\S+\.\S+/.test(value)) {
setErrors({...errors, [name]: '邮箱格式错误'});
} else {
const newErrors = {...errors};
delete newErrors[name];
setErrors(newErrors);
}
};错误信息展示优化
良好的错误提示应该：
- 在适当的时候显示（如失去焦点后）
- 提供清晰的错误描述
- 考虑无障碍访问
<label>
密码
<input
type="password"
onBlur={validatePassword}
aria-invalid={!!errors.password}
aria-describedby="password-error"
/>
</label>
{errors.password && (
<div id="password-error" className="error-message">
{errors.password}
</div>
)}每种方法各有优劣：原生验证最简单但功能有限，Formik+Yup适合复杂场景，React Hook Form性能最优。应根据项目需求选择合适方案。
