与 Formik 确认密码

Question

我正在尝试使用 formik 的字段验证来确认密码身份验证。但我在尝试比较密码和确认密码时遇到了麻烦

到目前为止我已经有了register.js

<Formik
        initialValues={{
        password: "",
        confirmPassword: "",
        }}
        onSubmit={(values, actions, { validate }) => {
                    validate(values);
                    register(values);
                    actions.resetForm();
                }}
       >
                {({ errors, touched, validateForm }) => (
                    <Form className={styles.form}>

        <Field
              type="password"
              name="password"
              validate={validatePassword}
              />            
        <Field
              type="password"
              name="confirmPassword"
              validatePassword={confirmPassword}
              />                        
          <button type="submit" onClick={() => validateForm()}>
                            {!isLoading ? "Register" : <Loader />}
                        </button>
                    </Form>
                )}
            </Formik>

验证看起来像这样。

function validatePassword(values) {
    let error = {};
    const passwordRegex = /(?=.*[0-9])/;
    if (!values) {
        error = "*Required";
    } else if (values.length < 8) {
        error = "*Password must be 8 characters long.";
    } else if (!passwordRegex.test(values)) {
        error = "*Invalid password. Must contain one number.";
    }
    return error;
}

Answer 1

验证密码的函数

const validatePassword = values => {
  let error = "";
  const passwordRegex = /(?=.*[0-9])/;
  if (!values) {
    error = "*Required";
  } else if (values.length < 8) {
    error = "*Password must be 8 characters long.";
  } else if (!passwordRegex.test(values)) {
    error = "*Invalid password. Must contain one number.";
  }
  return error;
};

验证确认密码的函数

const validateConfirmPassword = (pass, value) => {

  let error = "";
  if (pass && value) {
    if (pass !== value) {
      error = "Password not matched";
    }
  }
  return error;
};

将这些验证函数插入各自的字段

 <Field type="password" name="password" validate={validatePassword} />

 {errors.password && <div>{errors.password}</div>}

 <Field type="password" name="confirmPassword" validate={value =>
              validateConfirmPassword(values.password, value)
            }/>

 {errors.confirmPassword && (<div>{errors.confirmPassword}</div>)}

Answer 2

import * as yup from 'yup';

const validationSchema = yup.object({
password: yup
  .string()
  .required('Password is required')
  .min(5, 'Your password is too short.'),
  .matches(/[a-zA-Z]/, 'Password can only contain Latin letters.')
confirmpassword: yup
  .string()
  .oneOf([yup.ref('password')], 'Passwords must match')
});

在您的 Yup 验证模式中，您可以使用上述方法，这是检查密码匹配验证的 Formik 方法