Formik 是一个流行的 React 表单管理库,它简化了表单的状态管理和验证过程。Yup 是一个强大的 JavaScript 对象模式验证库,可以与 Formik 结合使用来进行表单验证。
适用于任何需要复杂表单验证的 React 应用,例如注册表单、登录表单、配置表单等。
以下是一个使用 Formik 和 Yup 验证两个字段是否相等的示例:
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
password: Yup.string()
.required('Password is required'),
confirmPassword: Yup.string()
.required('Confirm Password is required')
.oneOf([Yup.ref('password'), null], 'Passwords must match'),
});
const MyForm = () => (
<Formik
initialValues={{ password: '', confirmPassword: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
<Field type="password" name="confirmPassword" />
<ErrorMessage name="confirmPassword" component="div" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
);
export default MyForm;
如果你遇到了验证不通过的问题,可以检查以下几点:
oneOf
方法的使用是否正确,确保它引用了正确的字段。initialValues
中的字段名称与 Yup 模式中的字段名称一致。ErrorMessage
组件来显示具体的错误信息,帮助定位问题。通过以上步骤,你应该能够成功使用 Formik 和 Yup 验证两个字段是否相等。
领取专属 10元无门槛券
手把手带您无忧上云