使用 Formik 和 Yup 实现密码字段多重错误信息同时显示

本文介绍如何结合 React.js 的 Formik 和 Yup 库，实现密码字段多重验证错误信息同时显示的功能。通过自定义 Yup 验证规则，将多个密码验证条件整合到一个测试函数中，从而一次性返回所有不符合条件的错误信息，提升用户体验。

在使用 Formik 和 Yup 进行表单验证时，有时我们需要对一个字段进行多重验证，并希望能够一次性显示所有不符合条件的错误信息，特别是对于密码字段，例如要求包含大小写字母、数字、特殊字符以及最小长度等。默认情况下，Yup 会按照验证规则的顺序逐个验证，并只返回第一个遇到的错误。为了解决这个问题，我们可以利用 Yup 的 test 方法自定义验证规则，将多个验证条件整合到一个测试函数中，从而一次性返回所有错误信息。

实现步骤：

1. 自定义 Yup 验证规则：

   使用 Yup.string().test() 方法创建一个自定义的验证规则。在这个规则中，我们将编写一个测试函数，用于检查密码是否满足所有预设的条件。

   const validationPageTwo = Yup.object({
     email: Yup.string().required("Required field").email(),
     password: Yup.string()
       .required("Required field password")
       .test({
         test: (value) => {
           let errors = [];
   
           if (!/^(?=.{8,})/.test(value)) {
             errors.push("Must Contain 8 Characters");
           }
   
           if (!/^(?=.*[!@#\$%\^&\*])/.test(value)) {
             errors.push("One Special Case Character");
           }
   
           if (!/^(?=.*[0-9])/.test(value)) {
             errors.push("One Number");
           }
   
           if (!/^(?=.*[a-z])/.test(value)) {
             errors.push("One Lowercase");
           }
   
           if (!/^(?=.*[A-Z])/.test(value)) {
             errors.push("One Uppercase");
           }
   
           if (errors.length > 0) {
             throw new Yup.ValidationError({
               errors: errors,
               inner: true,
               path: "password",
               message: errors,
               value: value,
               name: "ValidationError",
             });
           }
   
           return true;
         },
       }),
   });

   在上面的代码中，test 函数接收一个函数作为参数，该函数接收密码字段的值 value。我们定义一个 errors 数组来存储所有验证失败的错误信息。然后，我们使用正则表达式来测试密码是否满足每个条件，并将不满足条件的错误信息添加到 errors 数组中。

   如果 errors 数组不为空，则表示密码验证失败，我们抛出一个 Yup.ValidationError 异常，并将 errors 数组作为 message 传递。这样，Formik 就能捕获到这个异常，并将所有错误信息显示给用户。

2. 集成 Formik：

   将自定义的 Yup 验证规则集成到 Formik 中。

   

   倍塔塞司

   AI职业规划、AI职业测评、定制测评、AI工具等多样化职业类AI服务。

   下载

   const formik = useFormik({
     initialValues: {
       email: "",
       password: "",
     },
     validationSchema: validationPageTwo,
     onSubmit: (values) => {
       alert(JSON.stringify(values));
     },
   });

   在上面的代码中，我们将 validationPageTwo 作为 validationSchema 传递给 useFormik hook。

3. 显示错误信息：

   从 Formik 中获取错误信息，并在 UI 中显示。

   const { errors } = formik;
   
   console.log(errors.password);

   errors.password 将会包含一个包含所有密码验证错误信息的数组。你可以使用这个数组来渲染错误信息列表。

注意事项：

• 确保 Yup.ValidationError 的 path 属性设置为 "password"，以便 Formik 能够正确地将错误信息与密码字段关联起来。
• 可以根据实际需求调整正则表达式和错误信息。
• 为了更好的用户体验，可以将错误信息以列表的形式展示，方便用户理解和修改。

总结：

通过使用 Yup 的 test 方法自定义验证规则，我们可以轻松地实现密码字段多重错误信息同时显示的功能。这种方法不仅可以提升用户体验，还可以使表单验证更加灵活和可控。 这种方法也可以应用于其他需要多重验证的字段。