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

使用React TSX React-hook-forms Yup有条件地验证可见字段

React TSX是一种使用TypeScript编写的React组件的语法扩展。它允许我们在React组件中使用TypeScript的类型检查和静态类型推断,提供了更好的代码可读性和可维护性。

React-hook-forms是一个轻量级的表单验证库,它基于React Hooks实现。它提供了一种简单且灵活的方式来处理表单验证,并且能够与各种UI库和表单组件无缝集成。

Yup是一个JavaScript对象模式验证库,它可以用于验证和转换数据。它提供了一种简单且直观的方式来定义验证规则,并且可以与React-hook-forms无缝集成。

有条件地验证可见字段是指根据特定条件来决定是否对某些字段进行验证。在React-hook-forms中,我们可以使用Yup来定义验证规则,并通过设置条件来控制字段的验证。

以下是一个示例代码,演示了如何使用React TSX、React-hook-forms和Yup来实现有条件地验证可见字段:

代码语言:txt
复制
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  email: yup.string().email().when('showEmail', {
    is: true,
    then: yup.string().required('Email is required'),
    otherwise: yup.string()
  }),
  password: yup.string().required('Password is required')
});

const App = () => {
  const { register, handleSubmit, errors, watch } = useForm({
    resolver: yupResolver(schema)
  });

  const showEmail = watch('showEmail');

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Show Email</label>
        <input type="checkbox" {...register('showEmail')} />
      </div>
      {showEmail && (
        <div>
          <label>Email</label>
          <input type="text" {...register('email')} />
          {errors.email && <p>{errors.email.message}</p>}
        </div>
      )}
      <div>
        <label>Password</label>
        <input type="password" {...register('password')} />
        {errors.password && <p>{errors.password.message}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

在上述代码中,我们定义了一个包含两个字段(email和password)的表单。根据showEmail字段的值,决定是否显示并验证email字段。当showEmail为true时,email字段为必填项,否则不进行验证。

这里使用了React-hook-forms的useForm钩子来处理表单,并通过yupResolver将Yup验证规则应用到表单中。通过使用register函数将表单字段与验证规则关联起来,并使用handleSubmit函数来处理表单的提交。

在表单的渲染部分,我们使用watch函数来获取showEmail字段的值,并根据其值来决定是否渲染和验证email字段。如果showEmail为true,则渲染email字段,并显示相应的错误信息。

这样,我们就实现了有条件地验证可见字段的功能。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送):https://cloud.tencent.com/product/umeng
  • 区块链(区块链服务):https://cloud.tencent.com/product/baas
  • 元宇宙(腾讯云元宇宙解决方案):https://cloud.tencent.com/solution/metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 组件优化

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

7.2K20

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

它提供了一系列功能和特性,使创建、管理和验证表单变得更加容易, 如: 易于使用的 API:Formik 提供了一个简洁直观的 API,让你能够快速定义和操作表单字段。...高效的验证:Formik 内置了强大的验证功能,可以轻松定义字段验证规则,并在用户输入时实时反馈错误信息。...可组合的表单字段:Formik 支持自定义表单字段组件,使你能够灵活创建复杂的表单布局。...与其他库集成:Formik 可以与其他流行的库和工具(如 YupReact Hook Form)集成,提供更多的扩展性和灵活性。...核心组成 Formik 的核心实现原理是通过将表单的状态和逻辑分离,使开发者能够更轻松管理和验证表单数据。

31510
  • Mock16-项目前端框架Antd升级

    ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.16.0 看英文错误大概落在了node js 不支持什么,具体code码为 ERR_OSSL_EVP_UNSUPPORTED,利用搜索引擎(推荐bing,有条件直接...这里其中页面代码,我直接将对应的文件拷贝到同样的位置下: src/pages/Project/index.jsx src/pages/Project/components/UpsertProject.tsx.../migration-v5-cn 组件弹框的受控可见 API 统一为visible 变为 open 重启启动项目,查看项目管理业务是否正常工作,不出意外的出意外了,有个接口请求错误导致项目列表请求失败,...检查下具体为后端代码的字段缺失错误 另外在回归测试编辑和修改操作的时候也遇到一些问题,两处小修复代码如下: 因请求自动带了token所以params的传递要从自定义remove?...props.upsertName, props.upsertCurrent, props.upsertPageSize); } 最后整体回归测试下项目管理的基本功能 虽然升级过程很坎坷,但怎么说呢,学习的道路就是这样,要不断折腾

    16110

    Next.js 14 初学者入门指南(下)

    推荐阅读 ‍‍Next.js 14 初学者入门指南 (上)‍‍ Metadata:在Next.js项目中优化SEO 在当今这个信息爆炸的时代,拥有一个高可见度的网站已成为许多企业和个人的追求。...当你在layout.tsx文件中定义元数据时,title字段提供了几个有趣的选项来增加灵活性: //layout.tsx export const metadata: Metadata = { title...通过明智使用模板,你可以在保持代码组织和复用性的同时,为用户提供流畅且一致的浏览体验。...使用 loading.tsx 可以有效提升用户体验,特别是在网络环境较差或内容较多需要较长时间加载的场景下。...六、error.tsx 在构建现代web应用时,有效管理和响应错误是至关重要的。

    30610

    Vite前端项目搭建从0到1

    安装完 Nodejs 之后,包管理器npm也会被自动安装,你可以执行下面的命令来验证:npm -v当然,在现代的前端项目中,我非常不推荐使用 npm 作为项目的包管理器,甚至也不再推荐yarn(npm...我们可以来看看 main.tsx 的内容:import React from 'react'import ReactDOM from 'react-dom'import '....初识配置文件在使用 Vite 的过程,我们需要对 Vite 做一些配置,以满足日常开发的需要。...从脚手架项目的package.json中就可见一斑:"scripts": { // 开发阶段启动 Vite Dev Server "dev": "vite", // 生产环境打包 "build"...在浏览器中打开http://localhost:5000址,你将看到和开发阶段一样的页面内容,证明我们成功完成第一个 Vite 项目的生产环境构建。

    63380

    2022 年的 React 生态

    如果你发现自己过于频繁使用 React 的 Context 来处理共享/全局状态,你一定要看看 Redux,它是现在最流行的状态管理库。...所有的方案在大型 React 应用中都适用。最后一点提示:如果你想在 React有条件应用一个 className,可以使用像 clsx 这样的工具。...它提供了从验证(一般会集成 yup 和 zod)到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。...建议: React Hook Form 集成 yup 或 zod 进行表单验证 如果已经在使用组件库了,看看内置的表单能不能满足需求 链接: React Hook Form:https://react-hook-form.com...然而,由于身份验证有很多安全风险,而且并不是所有人都了解其中的细节,我建议使用现有的众多身份验证解决方案中的一种: Firebase:https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

    5.8K20

    【译】Graphql, gRPC和端对端类型检验

    未来可以很方便增加服务端接口。只需要在我们的schema中增加查询(queries)和变更(mutations)字段,就可以在应用中使用(consuming)这些数据了。...在此基础上,我们进一步使用apollo-typed-components来给每项操作生成react-apollo组件,也就是ApolloComps.tsx文件中的GetTodosQuery组件、CreateTodoMutation...需要注意的是TypeScript使用.ts和.tsx文件扩展名,而不是.js和.jsx。...在.tsx中,需要使用as操作符来重写这一表达式: const foo = bar as Foo 我们在ApolloComps.tsx文件中生成出来的Query/Mutation组件看起来像下面这样:...幸运是,我们通过自动生成的方式让开发者不用为每个操作准确无误去整合这些片段,他们只需要关注每个操作所对应的独立的React组件。

    3.1K20

    如何在 Next.js 全栈应用程序中无缝实现身份验证

    这些库的设置流程涉及多个步骤,虽然已经能较好配合 Google 或 GitHub 等服务实现社交身份验证,但毕竟要比密码登录更困难。...到这一步,我们就能在应用程序中使用 Clerk 了。 向应用添加身份验证 登录和注册页 首先,我们需要创建注册和登录页。...使用以下内容,在 /src/app/sign-in/[[..sign-in]]/page.tsx 中创建一个新组件:import { SignIn } from '@clerk/nextjs'; export...中括号用于捕捉 Clerk 内部使用的 /sign-in/... 之后的所有内容。使用新的 App Router 功能,页面本体将始终存放在 page.tsx 文件之内。...NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ Clerk 提供的这个中间件,将确保只有 root 页面和注册 / 登录页面对未经身份验证的用户可见

    1.1K20

    React组件设计实践总结02 - 组件的组织

    上面使用了useLogin.tsx来单独维护业务逻辑....自定义表单组件一般不需要封装到 event 对象中 几乎所有组件库的自定义表单都使用这种 API. 这使得我们的自定义组件可以和第三方库兼容, 比如antd 的表单验证机制 更容易被动态渲染....因为接口一致, 可以方便进行动态渲染或集中化处理, 减少代码重复 回显问题....因为 Taro 使用 React 的标准语法和 API,这使得我们按照原有的 React 开发约定和习惯来开发多端应用,且只保持一套代码....开发者设计一个模块的 API 时, 需要考虑模块各种使用方式, 并使用 index 文件控制模块可见性: // 导入外部模块需要使用的类型 export * from '.

    1.9K31

    用TS+GraphQL查询SpaceX火箭发射数据

    近一两年来 GraphQL 和 TypeScript 的使用都程爆发式增长,当两者与React结合使用时,它们可以为开发人员提供理想的开发体验。...通过使用 GraphQL,我们可以自动且自由输入我们的 React 组件的属性。这样可以减少产品上的错误并提高迭代速度。...我们能够编写与使用它们的组件并存的查询,并且 UI 能够准确请求它要呈现的内容。 在使用 REST API 时,我们所能找的的文档有可能不是最新的。...为了更好地理解可用于 LaunchRocket 的字段,你可以通过侧面的模式导航器来了解可用数据。 现在将此查询转移到我们的程序。...如果你希望深入了解该项目,接下来的步骤将是使用 API 中的其他字段添加分页和更多的数据关联。

    3K20

    邮件狂欢:Next.js和Resend SDK的电子邮件魔法

    在本教程中,您将学习如何使用 React-Email、Next.js 和 Resend 从经过验证的域发送电子邮件。先决条件以下是您在本教程中需要遵循的内容:Node.js 安装在您的计算机上。...您稍后将使用此 API 密钥,因此请记下它。验证发送电子邮件的域必须验证将用于发送电子邮件的域。在仪表板的左侧,选择域并单击添加域按钮:出现一个新页面。通过在输入字段中输入域来添加域。...reset提供的功能用于useForm在提交后重置表单字段。实施动态电子邮件模板使用 React Email,创建现代电子邮件模板变得非常容易。...要使用这组标准组件来构建电子邮件模板,请导航到该components目录并创建EmailMessage.tsx文件。...使用重新发送 SDK 发送电子邮件到目前为止,您已经验证了域,在 Next.js 项目中设置了重新发送,并实现了动态电子邮件模板。是时候使用重新发送来发送电子邮件了。

    1.6K00

    分享 7 个你可能不知道的 Next.js 14 小技巧

    NextJS提供了一种称为路由分组的功能,可以帮助你更有效组织路由结构。...使用路由分组整理: 通过使用路由分组,你可以将相关的路由放在同一个文件夹(即路由组文件夹)下。这样,你就可以根据不同主题或功能轻松找到相关路由。...元数据API的使用 你可以在页面组件(如page.tsx)或布局组件(如layout.tsx)中使用元数据API。...使用动态元数据的优势 SEO提升:通过为每个页面提供独特且相关的元数据,可以显著提高页面在搜索引擎中的可见度。 个性化体验:动态元数据允许根据页面内容或用户行为提供更个性化的页面标题和描述。...在目录中创建不直接提供给客户端的文件 在特定目录中创建文件,这些文件不会直接作为页面提供给客户端,除非它们被显式添加到page.tsx文件中。 5.

    67710

    单元测试

    它的主要作用是使你能够在测试中对使用了 Canvas 的代码进行断言和验证,而无需实际渲染真实的画布。...(已默认引入,不需要手动再次引入) 文件命名规则 在需要测试的目录下新建 __tests__ 目录 根据要测试的内容命名测试文件 对于组件文件,可以使用组件的名称作为文件名,并在文件名后面添加 .spec.tsx...对于包含多个组件的文件,可以使用文件名作为文件名,并在文件名后面添加 .spec.tsx 后缀。例如,如果文件名是 Form.tsx,则文件名可以是 Form.spec.tsx。...act } from '@testing-library/react'; act 是一个用于处理 React 组件的异步更新和副作用的工具函数,它的主要作用是确保在测试中正确触发和等待组件更新。...act 的使用场景如下: 当你在测试中进行与 React 组件的交互(例如模拟用户点击、输入等)时,可以使用 act 来确保组件在更新后进行正确的断言。

    27610

    助力ssr,使用concent为nextjs应用加点料

    开源不易,感谢你的支持,❤ star concent^_^ [image.png] 序言 nextjs是一个非常流行的 React 服务端渲染应用框架,它很轻量,简单易上手,社区活跃,所以当我们使用react...可以看到一个如下的目录结构 |____index.tsx |____App.tsx |____types // store的类型定义处 |____features // 功能组件列表 | |...____counter // counter功能 | | |____Counter.tsx // counter组件 | | |____model // counter模型(包含state,...}) => num * 2, // 仅当num发生变化才触发此函数 } } }) 之后就可以全局即插即用啦,类组件和函数组件都可以用同样的方式去读取数据或调用方法,敲重点啦,如果ui处是有条件语句控制是否要消费状态或衍生数据的话...并且它模拟实现了animate.css90%的动画效果,您可以轻松把 web 页面端的动画效果转为视频,真的很给力。 ___ 本文由tntweb腾讯新闻前端团队供稿,欢迎转载 [image.png]

    2.5K81

    浅谈表单受控性及结合Hooks应用

    在本文中将介绍在 React 中受控和非受控表单是如何使用的,以及现代化使用 hooks 来管理 form 状态。...使用场景: 需要对用户输入进行验证和处理的表单 需要实时反映用户输入的值的表单 需要根据表单元素的值动态改变其他组件的状态或行为等情况时会使用到受控表单 示例代码: import React, { useState...可以实时验证和处理用户输入 不利于实时反映用户输入的值,不方便对用户输入进行验证和处理 表单的整体控制 对表单数据有更好的控制 对表单数据的控制有限 数据流 可以根据表单元素的值动态改变其他组件的状态或行为...// rc-form-field // Field.tsx public reRender() { if (!...不同于 rc-field-form 中使用的受控表单来做表单状态管理,react-hook-form 使用React 的 useRef 和 useReducer 来处理表单数据的状态,而不是使用

    31810
    领券