满足最少条件时如何使用 yup 验证密码

问题描述

我正在尝试使用 yup 进行密码验证，其中至少满足 4 个密码条件中的 3 个。我很难找到一种现有的方法来做到这一点。

我的要求是：

至少 8 个字符 必须使用至少三个字符中的字符 以下四种字符类型： • 英文字母大写 字母 (A-Z) • 英文字母小写字母 (a-z) • 数字 (0-9) • 非字母数字符号（例如！、#、$、%）

我的验证（使用 react-hook-form）是这样的：

~

问题当然是这使得所有 4 个条件都需要，而 4 个条件中只有至少 3 个需要。任何解决此问题的帮助将不胜感激！谢谢

解决方法

当您有自定义测试时，我建议您使用 yup 方法 yup.test() 编写如下自定义测试函数，如果您想重用测试，也可以使用 yup.addMethod() 扩展它功能

 password: Yup.string()
      .required("Please enter a password")
      .min(8,"Password too short")
      .test("isValidPass"," is not valid",(value,context) => {
        const hasUpperCase = /[A-Z]/.test(value);
        const hasLowerCase = /[a-z]/.test(value);
        const hasNumber = /[0-9]/.test(value);
        const hasSymbole = /[!@#%&]/.test(value);
        let validConditions = 0;
        const numberOfMustBeValidConditions = 3;
        const conditions = [hasLowerCase,hasUpperCase,hasNumber,hasSymbole];
        conditions.forEach((condition) =>
          condition ? validConditions++ : null
        );
        if (validConditions >= numberOfMustBeValidConditions) {
          return true;
        }
        return false;
      })

这是一个带有工作示例的演示codesandbox