使用 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>)}

使用 Formik 确认密码

Confirm Password with Formik

authentication

formik