javascript - 如果密码包含数字,如何通过 React Hook Form 检查?
问题描述
我如何通过 React Hook Form 和 Yup 检查密码是否包含数字、大写字母和特殊符号?我在下面尝试了类似的方法,使用验证功能,但它不能正常工作。我有一个错误'无法读取未定义的属性'reduce''。
const Register = ({ setRegisterView }) => {
const validationSchema = Yup.object().shape({
email: Yup.string()
.required("It is required.")
.email("Email is wrong"),
password: Yup.string()
.required("It is required.")
.min(8, "Password need to has 8 signs.")
.validate((value) => {
return (
[/[a-z]/, /[A-Z]/, /[0-9]/, /[^a-zA-Z0-9]/].every((pattern) =>
pattern.test(value)
) ||
"Information"
);
}),
});
const {
register: validate,
formState: { errors },
handleSubmit,
} = useForm({ mode: "onSubmit", resolver: yupResolver(validationSchema) });
return (
<Wrapper>
<Form onSubmit={handleSubmit(registerProcess)}>
<FieldType>Email</FieldType>
<StyledInput
name="email"
type="email"
error={errors.email}
{...validate("email")}
/>
{errors.email && <Error>{errors.email.message}</Error>}
<FieldType>Password</FieldType>
<StyledInput
name="password"
type="password"
error={errors.password}
{...validate("password")}
/>
{errors.password && <Error>{errors.password.message}</Error>}
<LoginButton type="submit">SIGN UP</LoginButton>
</Form>
</Wrapper>
);
};
export default Register;
解决方案
我认为问题在于您正在使用validate
which 期望 aPromise
作为返回值 -> Docs。您应该改为test
在此处使用。
const validationSchema = Yup.object().shape({
email: Yup.string().required("It is required.").email("Email is wrong"),
password: Yup.string()
.required("It is required.")
.min(8, "Password need to has 8 signs.")
.test("passwordRequirements", "Information", (value) =>
[/[a-z]/, /[A-Z]/, /[0-9]/, /[^a-zA-Z0-9]/].every((pattern) =>
pattern.test(value)
)
)
});
推荐阅读
- javascript - 如果特定键的值相同,如何将值更新为嵌套的对象数组?
- linux - 我在 ssh 中批量执行了一个权限命令,现在我被锁定了
- css - 仅在触发 Modal 后才延迟加载 iframe
- google-cloud-functions - 如何使用 Cloud Functions 读取存储在 Google Cloud Storage 中的 CSV 数据
- jupyter-notebook - 如何解决 jupyter notebook 中的 ModuleNotFoundError?
- javascript - 在反应jsx中有条件地呈现className
- r - 在 ggplot2 如何显示 emmeans 在已编辑的绘图中对比显着的 p 值
- excel - 在点 0, 0 上截距的多项式逼近
- video - ffmpeg - 视频部分的无缝交叉淡入淡出循环
- javascript - 如何修复每次用户滚动时弹出的横幅?