问题标签 [yup]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
9103 浏览

javascript - 使用 Yup 验证信用卡详细信息

我正在使用Yup验证注册表单,但由于需要 Yupstringnumber模式中的方法,我正在努力验证信用卡字段。

例如卡号不应超过 16 个字符。max使用模式中的方法很容易实现这一点string。但是,如果用户输入 16 个字母而不是数字,则当前将通过验证。如果我将模式从更改stringnumberthenmax不会以相同的方式运行,而是将字段中的所有数字相加并检查它是否等于小于最大数字。

我需要使用模式的minandmax方法的字段示例number是到期月份,其中最小值为 1,最大值为 12。但是,我仍然需要检查以确保字符数是在此字段中为 2,因为前导 0 应用于 1 月至 9 月的月份。

0 投票
1 回答
1550 浏览

semantic-ui-react - 使用 Yup 进行语义 ui-react 表单验证

我阅读了这个解决方案,但这并没有真正回答这个问题。我正在使用 formik 和语义 UI 反应。是否可以将 Yup 与语义 UI 反应一起使用?如果是的话,有人可以提供一个例子吗?

0 投票
0 回答
647 浏览

reactjs - 如何使用 redux 更新 formik 中的值

我无法用我从 redux 获得的值更新 Formik。

这是我的 mapPropsToValues:

我也加入了enableReinitialize: true

我连接它的方式是,total 和 token_quantity 都是我从 redux 获得的值,我需要从商店中填充它们。

我的总计验证模式是:

我的 Field 组件是:

我的代码的工作方式是,当用户单击按钮时,将调度一个动作,然后商店返回totaland quantity。第一次完美运行,值显示在字段中。我遇到的问题是,如果用户随后在字段中输入,无论他们之后是否单击按钮,该值都不会更新。似乎有两个调用setFeildValue,一个是来自 redux 的值,另一个是用户输入的显示值。

redux 和 formik 状态

有人可以告诉我我做错了什么,因为我无法让它工作而且我已经花了两天时间。

0 投票
1 回答
5545 浏览

reactjs - 使用 formik、yup 和 axios 去抖动

尝试对 api 调用进行去抖动以检查给定的电子邮件地址是否已被占用。

这是错误的逻辑。

这将产生

0 投票
4 回答
9382 浏览

javascript - 是的,条件验证

如何实现条件,例如 1 个字段的值应始终大于另一个字段的值。

这是我的架构

我想检查 value2 是否始终为 > value。如何在 when 条件下访问 value2 的值?

0 投票
1 回答
3423 浏览

javascript - 使用 Yup 验证多个输入字段

我目前正在使用 Formik 并使用 Yup 进行验证。

我希望验证 2 个日期、一个开始日期和一个结束日期。

起初这很简单,我有两个输入字段,start_date并且end_date. 这两个都只是接受以下格式的文本输入,MM-YYYY. 验证已经足够好了,它首先将该字符串转换为日期,使用moment(value, "MM-YYYY").

由此,我们进行了以下测试:

test1只需检查 是否MM-YYYY是有效日期。test2检查 thestart_date是否在end_date. 为了简单起见,end_date测试是相同的,除了有任何额外的测试。额外测试检查end_date是否等于或小于当前日期。

这就是我目前拥有的,但是我想要的是 4 个输入框:

  • start_date_month(01, 02, 03...)
  • start_date_year(2000 年、2001 年……)
  • end_date_month
  • end_date_year

这很容易做到,但测试会有点不同,我不确定我们是否可以start_date_month一起测试start_date_year。本质上,我需要将它们连接起来以再次-创建MM-YYYY

有什么想法可以用 Yup 做到这一点吗?

0 投票
2 回答
778 浏览

reactjs - 一旦字段对 Formikl / Yup 有效,如何执行自定义函数

我想在字段有效时执行自定义函数?

像这样的东西。。
<Field name="postal-code" onValid={...} />

原因是,一旦用户键入有效的邮政编码,我想让获取(GET)从 API 获取地址

0 投票
2 回答
1593 浏览

draftjs - 通过 Formik 中的 yup 验证 Draft-js EditorState

我正在使用带有 Formik 的 Draft-js 和yup验证 Draft EditorState 组件。

我假设我可以通过使用以下 yup 测试来检查 EditorState 是否为空白:

但是,我收到错误:

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.esm.js:491) at formik.esm.js:174

这是formik的错误,还是我使用错误

其他信息:

在validationSchema 中,我得到以下信息:

但在 EditorState ('body' 字段)的 onChange 处理程序中,它可以正常工作:

0 投票
1 回答
4183 浏览

reactjs - Formik + yup 不显示错误

我有以下表格:

表单工作正常,显示和所有内容,但我似乎无法让 formik 看到错误。在这个例子中,我有整数值的长度字段。每当我输入一些东西时,验证工作(console.log打印)但对象完全是空的。

即使我在输入中写了非数字,也不会显示任何错误。

有没有人对我可以做些什么来使它工作有什么建议?

0 投票
3 回答
23862 浏览

reactjs - React Formik + 是的,onChange 触摸领域

我想有条件地在我的表单中显示错误。

formik 的工作方式是,如果您更改一个字段,所有验证都会运行,并且即使您只更改了一个字段,也会返回所有错误。

我只想在字段被触摸并且我希望字段被触摸 onChange 时才显示错误。对字段的第一次更改应该使它被触及。

目前 formik 在提交时正在触及字段。我怎么能在改变时触摸它?

这是我目前的形式: