如果密码包含数字，我如何通过 React Hook Form 检查？

Question

如果密码包含数字、大写字母和特殊符号，我如何通过 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;

Answer 1

在你的输入中试试这个

<Input type="email" 
       error={errors.email}
       {...register("email")}
/>

请注意，内置验证不适用于外部验证，因此 required 不会在此处执行任何操作。

Answer 2

我认为问题在于您使用的 validate 期望 Promise 作为 return 值 -> 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)
        )
      )
  });

如果密码包含数字，我如何通过 React Hook Form 检查？

How can I check by React Hook Form if password contains a number?

javascript

forms

reactjs

react-hook-form