首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Formik和Yup验证2个字段是否相等

基础概念

Formik 是一个流行的 React 表单管理库,它简化了表单的状态管理和验证过程。Yup 是一个强大的 JavaScript 对象模式验证库,可以与 Formik 结合使用来进行表单验证。

相关优势

  • Formik: 简化了表单状态管理,提供了内置的验证支持,易于集成和扩展。
  • Yup: 提供了丰富的验证规则和错误消息定制,支持复杂的验证逻辑。

类型

  • 同步验证: 在用户输入时立即进行验证。
  • 异步验证: 在用户提交表单时进行验证,适用于需要网络请求的验证场景。

应用场景

适用于任何需要复杂表单验证的 React 应用,例如注册表单、登录表单、配置表单等。

示例代码

以下是一个使用 Formik 和 Yup 验证两个字段是否相等的示例:

代码语言:txt
复制
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  password: Yup.string()
    .required('Password is required'),
  confirmPassword: Yup.string()
    .required('Confirm Password is required')
    .oneOf([Yup.ref('password'), null], 'Passwords must match'),
});

const MyForm = () => (
  <Formik
    initialValues={{ password: '', confirmPassword: '' }}
    validationSchema={validationSchema}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field type="password" name="password" />
        <ErrorMessage name="password" component="div" />

        <Field type="password" name="confirmPassword" />
        <ErrorMessage name="confirmPassword" component="div" />

        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default MyForm;

解决问题的方法

如果你遇到了验证不通过的问题,可以检查以下几点:

  1. 确保 Yup 模式正确: 确认 oneOf 方法的使用是否正确,确保它引用了正确的字段。
  2. 检查初始值: 确保 initialValues 中的字段名称与 Yup 模式中的字段名称一致。
  3. 调试错误消息: 使用 ErrorMessage 组件来显示具体的错误信息,帮助定位问题。

参考链接

通过以上步骤,你应该能够成功使用 Formik 和 Yup 验证两个字段是否相等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 组件优化

使用时需要先下载: npm install formik --save Formik 库可以与 yup 库一块使用,库的作者也推荐搭配使用,yup 是一个用于验证字段的库,它的用法类似于 React 中的...yup 库使用之前也需要先下载。 用法 下面写个例子,一个表单,我们需要表单做验证,验证不通过就提示用户为什么不对。....required("昵称还没填写呢~"), // required 表示必填项 email: Yup.string().email("无效的邮箱") // test 函数内部还可以异步的验证字段...() .when('password', (password, schema) => { // 用 when 可以拿到 password 字段值,然后进行测试,如果两个值相等...使用 Formik + yup 库实现了验证逻辑与组件的解耦,验证逻辑统一由 yup 管理。 相对于 redux-form 库,我觉得 formik 库更好用一些吧。

7.2K20

Formik:让用户体验更加出色的表单解决方案

它提供了一系列功能和特性,使创建、管理和验证表单变得更加容易, 如: 易于使用的 API:Formik 提供了一个简洁直观的 API,让你能够快速定义和操作表单字段。...高效的验证:Formik 内置了强大的验证功能,可以轻松地定义字段验证规则,并在用户输入时实时反馈错误信息。...与其他库集成:Formik 可以与其他流行的库和工具(如 Yup、React Hook Form)集成,提供更多的扩展性和灵活性。...可以使用以下代码:const formik = useFormik();。 配置表单字段:使用 Formik 的 Field 组件来定义表单字段。...Field 组件:用于渲染表单字段的组件,它接受表单字段的名称、类型和验证规则等参数,并根据这些参数渲染相应的表单字段。

35110
  • 停止使用==和!=来判断浮点数是否相等

    写代码的小伙伴都知道,在计算机里,我们使用浮点数来表示小数.然而,由于浮点数在计算机中的表示方式,直接使用==和!=来判断两个浮点数是否相等可能会导致意想不到的结果....Math.Abs(a - b) 和 b 是否足够接近,从而避免了直接比较浮点数带来的问题....基于相对误差: 使用相对误差来比较浮点数,可以避免数值范围对比较结果的影响.相对误差的计算公式如下: /// /// 比较两个浮点数是否相等. /// ///...于是我们得到了如下的代码. /// /// 比较两个浮点数是否相等.使用相对误差. /// /// /// 使用方式: ///...=,而是使用一个小的误差范围来判断两个浮点数是否相等.这种方法可以帮助我们避免由于浮点数精度问题导致的错误判断.

    6210

    php注册系统和使用Xajax即时验证用户名是否被占用

    在php中使用Xajax能够即时与数据库发生交互 带给用户更好的体验 主要的应用有网页的即时、不刷新的登录系统 也可以利用于注册系统中 即时验证用户名是否被占用 一、基本目标 首先在mysql中有一张用户信息表...user 编写一个用户注册系统,一开始注册按钮是禁用的状态 当用户输入用户名完毕时,马上检查这个用户名是否被占用,如果是,禁用注册按钮,并弹出对话框 如果用户输入的用户名没有被占用,则解锁注册按钮,但如果用户输入两次输入的密码不一致...javascript就可以, 下面的代码说明,不再对此进行讨论,因为之前我在《【JavaScript】表单即时验证,不成功不让提交》(点击打开链接)一文中已经对此讨论得比较详细了。...一个是用户填写注册信息的页面xajaxrec.php,一个是把用户注册信息填写到数据库的处理页面下xajxrecsuc.php xajxrecsuc.php的代码如下,与之前《【php】数据库的增删改查和php...与javascript之间的交互》(点击打开链接)的插入处理页面dbinsert.php根本就是一样的,由于笔者用的是同一张用户表,同一个数据库,因此连代码都不改就能够使用了,就把“添加成功”四个大字,

    1.3K30

    React 表格组件设计

    滚动条问题:滚动条的平滑性和响应性需要特别关注。2.2 如何避免错误使用成熟的库:使用如 react-window 或 react-virtualized 等成熟的虚拟滚动库。...合理设置滚动条:确保滚动条的平滑性和响应性,避免卡顿。...输入验证:需要对用户输入进行验证,确保数据的有效性。3.2 如何避免错误使用状态管理库:使用如 useState 或 useReducer 来管理表格状态。...合理使用表单验证:使用如 Formik 或 yup 等库来进行表单验证。3.3 代码示例import React, { useState } from 'react';import '....无论是基本表格、虚拟滚动表格、可编辑表格还是响应式表格,都有其特定的应用场景和优化技巧,合理选择和使用这些技术可以显著提升用户体验和开发效率。

    19010

    2022 年的 React 生态

    它基本上零配置,为你提供开箱即用的简约启动和运行 React 应用程序。 但现在来看,CRA 使用的工具过时了 — 从而导致我们的开发体验变慢。...它提供了从验证(一般会集成 yup 和 zod)到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。...建议: React Hook Form 集成 yup 或 zod 进行表单验证 如果已经在使用组件库了,看看内置的表单能不能满足需求 链接: React Hook Form:https://react-hook-form.com...://eslint.org/ Prettier:https://github.com/prettier/prettier ---- 身份认证 在 React 应用程序中,你可能希望引入带有注册、登录和退出等功能的身份验证...然而,由于身份验证有很多安全风险,而且并不是所有人都了解其中的细节,我建议使用现有的众多身份验证解决方案中的一种: Firebase:https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

    5.8K20

    2023 React 生态系统,以及我的一些吐槽……

    字段,并在组件挂载和卸载时管理缓存数据的生命周期 RTK Query 提供了“缓存条目生命周期”选项,可以通过 WebSocket 消息流式传输缓存更新,以在获取初始数据后使用 我们有从 OpenAPI...Formik 是一个小型库,可以帮助您解决以下三个最令人讨厌的问题: 将值放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方,Formik 可以让事情井然有序,使得测试、重构和理解您的表单变得轻而易举...Redux-Form 的大小是 22.5 kB(经过最小化和 gzip 压缩),而 Formik 的大小是 12.7 kB。...格式化流水线、解析流水线、内置验证,根据状态向元素添加和移除类名...这一切都很棒! 直到你需要做一些不符合 AngularJS 设计思路的事情。...我之前使用过 Formik,但成果并不太理想。对于普通的表单来说,它表现得很好,但在多步骤表单方面有些困难。虽然后来他们添加了“向导”表单,但使用起来并不太直观。

    78530

    2020 年你应该知道的 React 库

    只有通过 React,您才能使用函数组件和 props 构建组件驱动的用户界面。它带有一些内置的解决方案,例如,用于本地状态和副作用的 React Hooks。...它提供了从验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单,这两种方法对于 React 应用程序都是有效的解决方案。...建议: ESLint Prettier React 认证 在较大的 React 应用程序中,您可能希望引入具有注册、登录和退出功能的身份验证。此外,密码重置和密码更改功能往往是需要的。...通常的方法是使用自定义身份验证实现自己的自定义后端应用程序。如果您不想启动自己的身份验证,可以考虑类似 Passport.js 的东西。...如果你希望有人来处理所有的事情,如果你已经在使用第三方的身份验证/数据库,Netlify 是一个很受欢迎的解决方案,比如 Firebase,你可以检查他们是否也提供主机服务(比如 Firebase Hosting

    14.4K40

    回望过去,展望未来- 2024 React 生态一览表

    同时,这个组件在原有功能的基础上,还会被其他页面(B)调用,通过传人showLabels字段来显示正面和反面的字样,并且还有通过传人showButton来控制是否显示Button并用于触发硬币翻转。...也就是在原有页面 A 中,我们是不传入showLabels,结果就是页面不会显示正面和反面的字样,但是在页面 B 中,我们传入了showLabels字段,会显示对应的字样。...例如,可以在导航到某个页面前检查用户是否有权限访问该页面。常见的导航守卫有路由的beforeEach、beforeResolve和afterEach等。...Formik Formik[8] 提供一组工具和组件,使管理表单状态、验证和提交变得容易。使用 Formik 的唯一缺点是它没有维护。 2....单元测试旨在验证这些单元的行为是否符合预期。 「集成测试(Integration Testing):」 集成测试是验证「多个单元之间」的协作和集成是否正确。

    74010

    盘点React开发中不可或缺的工具

    React Dev Tools 在开发原生js的时候,我们经常使用浏览器自带的开发者工具,它足以帮助我们查看和调试js中变量的各种信息,但是对于react框架来说,因为它是采用动态渲染生成的代码结构,...useHooks Hooks是 React 中的新增功能,可让我们在不编写类的情况下使用状态和其他 React 的功能。...Formik 表单处理是网页开发经常会遇到的问题,而Formik是一个可以在React中构建表单的组件。...它是一个小型库,可以让表单的各个状态都能被保存,对于错误的处理和表单的验证,它都提供了非常友好的处理方式,可以说它就是专门为表单处理而诞生的。...它与支持热模块替换 (HMR) 和 Babel 插件的 Webpack 和其他打包器一起使用。通过使用它,可以让你的开发效率得到大大提升。

    1.7K20

    Python 3.7 新特性概览(附实例

    用户需要输入一个字符串,判断它是否匹配一个值。 """Test user's favourite Integrated Circuit."""...当然,除非你使用类型注解…… 注解和类型 从 Python 3.5 开始,类型注解就越来越受欢迎。对于那些不熟悉类型提示的人来说,这是一种完全可选的注释代码的方式,以指定变量的类型。...这就是注解和类型提示的基础。Python 3.7 中有什么变化?正如官方的 Python 文档所指出的,当人们开始使用注解作为类型提示时,出现了两个主要问题:启动性能和前向引用。...Dataclass 使用字段 (field) 来完成它们的工作,手动构造一个 field() 函数能够访问其他选项,从而更改默认值。...User: name: str = field(default_factory=lambda: input("enter name")) (我们不建议直接将 input 输入到属性中,这只是一个字段功能的演示

    83730

    组件分享之前端组件——用于表单状态管理和验证的 React Hooks (Web + React Native)

    组件分享之前端组件——用于表单状态管理和验证的 React Hooks (Web + React Native) 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下...组件基本信息 组件:react-hook-form 开源协议:MIT license 官网:react-hook-form.com 内容 本次分享的用于表单状态管理和验证的 React Hooks...(Web + React Native),在其构建时考虑到性能、UX 和 DX,采用原生 HTML 表单验证,与UI 库的开箱即用集成,体积小,无依赖,支持Yup , Zod , Superstruct..., Joi , Vest , class-validator , io-ts , nope和 custom 使用起来也比较方便,具体使用方式如下: 1、安装 npm install react-hook-form...采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

    4.7K10

    【译】73个超棒且可提高生产力的 NPM 包

    它具有可靠的事务支持、关系、即时和延迟加载、读取复制等特性。 ? 授权工具 21.Passport[42] Passport 的目的是通过一组可扩展的插件(称为策略)对请求进行身份验证。...向Passport 提供一个身份验证请求,Passport 提供钩子来控制身份验证成功或失败时发生的操作。 22.Bcrypt[43] 它是可以帮助你生成哈希密码的库。...这个包允许你解码、验证和生成 JWT。 ?配置模块 24.Config[45] 设置存储在应用程序中的配置文件中,可以由环境变量、命令行参数或外部源覆盖和扩展。...表单和邮件 42.Formik[65] Formik 是 React 和 React Native 的一个流行开源表单库。它具有易于使用、声明性和适应性的特点。...63.Underscore[86] Underscore 提供了许多常用的功能工具以及更专业的工具:函数绑定,javascript 模板,创建快速索引,深度相等测试等。

    5.9K30
    领券