React中表单输入字段的验证

文章/答案/技术大牛

发布

1回答

如何在规则验证中对输入使用Reacti-钩子表单和material(Mui)？

javascript、reactjs、validation、material-ui、react-hook-form

我使用react-hook-forms作为我们的应用程序表单的功能/验证，并使用MUI/Material作为我们的组件库。如果输入具有required属性集，则MUI将自动将required附加到输入标签中，但是，当我们将required属性添加到输入中时，HTML5表单验证优先于使用rules支柱进行react-hook-f

浏览 20提问于2022-11-22得票数 0

1回答

多输入的表单验证

beginner、validation、form、react.js、jsx

我为React中的多个输入(名称和电话号码)创建了一个简单表单的示例。如果用户在输入字段中输入无效数据，则在同一字段附近显示错误文本。我学习了许多使用React进行表单验证的不同示例，我不知道在表单中检查验证的最佳位置在哪里。import React

浏览 0提问于2018-05-23得票数 1

1回答

如何在React中从表单中获取数据

reactjs

我在我的React站点上有一个表单，我正在尝试获取用户输入的数据。我遵循了文档here和一个类似的Stack Overflow post here，当我按下submit按钮时，我会收到警告消息。但是，它不允许我在输入字段中键入任何内容。我的代码： class Search extends Component { super(props); this.state

浏览 97提问于2020-11-29得票数 1

1回答

React-hook-form文本字段的条件验证，基于是否选中了另一个复选框？

reactjs、validation、react-hook-form

我正在尝试向文本字段添加验证规则，如果选中表单中的单独复选框，则该字段必须为非空字符串才能提交表单。这是到目前为止我所拥有的链接：我需要表单中的最终文本输入("tiger_type")，以便只有在选中id为'tiger‘的复选框输入时才需要输入值。我对react和react-ho

浏览 12提问于2020-03-03得票数 4

回答已采纳

1回答

如何在表单的“外部”反应中验证表单

reactjs、forms、react-hooks、react-bootstrap、react-hook-form

我正在构建一个用于创建烹饪食谱的component in React。我正在使用react-hook-form来验证表单。我的容器里有两张表格。一个用于添加配料，具有三个输入字段(名称、数量、单位)，另一个用于步骤-具有一个输入字段。当我添加配料或步骤时，我会验证输入的数据是否正确，并阻止向列表中添加项目，如果数据不正确，该列表位于此表单

浏览 15提问于2020-04-06得票数 0

1回答

将无效参数动态添加到Joi验证

reactjs、joi

我有一个表单，它在SPA的前端和后端使用Joi进行验证，在前端使用React/redux、react- validation -mixin & joi- validation -strategy进行验证架构连接到构造函数中的this.validatorTypes在将错误传

浏览 3提问于2017-03-24得票数 1

2回答

React钩子式输入字段匹配验证最佳实践

reactjs、react-hook-form

在处理React钩子表单时，做输入字段匹配验证时的最佳实践是什么？例如，当匹配email输入时，等等。在查看电子邮件匹配验证时，使用React钩子表单在尝试通过验证方法将错误消息与“耦合元素”分离时发现了一个问题。ref只接受一个用于React钩子表单register的参数，而需要使用useRef来访问用于值匹配的current

浏览 4提问于2020-03-26得票数 7

回答已采纳

1回答

在组件中添加文本区域的值

reactjs、forms、events

我希望在输入字段并验证表单字段时，将文本添加到底部，并包含所有的AddNote组件和字段值。同时，该字段在表单验证时为空。我的项目看起来很像待办事项清单。当我在文本字段中输入值并验证表单时，该值将使用AddNote组件到达底部。但是，如果我修改文本，该值将保持不变，并实时变化。

浏览 1提问于2022-06-21得票数 1

回答已采纳

1回答

未重置的触摸属性

javascript、reactjs、typescript、react-native、formik

我有一个Formik表单，在表单中接受用户输入&提交后运行查询。当我单击“搜索”按钮时，会呈现一个列表。所有列表项目都有自己的按钮。当我第一次单击“绿色添加”按钮(从列表项中)时，该按钮不工作。没有打印控制台日志的内容。相反，将触发inputField的inputField事件。但是，如果我再次单击+按钮，它就会工作，并打印no。这个问题可见于模拟器/手机，而不是沙箱上的web模式。export const Add

浏览 3提问于2020-08-31得票数 1

回答已采纳

1回答

如果输入字段卸载react钩子表单，如何删除验证架构

reactjs、react-hook-form

我有一个表单，它将使字段具有条件。我使用react钩子表单来验证表单。这是我的代码：我希望如果用户不选中复选框，用户仍然可以提交没有字段firstName的表

浏览 12提问于2022-11-11得票数 0

回答已采纳

1回答

在Reactive原住民中使用验证构建表单的最合适方法是什么？

reactjs、react-native、forms、input

目前，我们有几个库来实现表单。但是，我不知道在Reactinative中使用库是合适的，还是完全实现表单更好。我见过像Formik和这样的选项

浏览 3提问于2022-12-02得票数 1

3回答

使用react钩子表单验证字段数组

reactjs、react-hook-form、react-forms

我想向输入字段添加验证。我正在使用react钩子表单。验证应该类似于字段的总和应该是100。如果任何字段的总和大于或小于100，则应在输入字段(最后编辑的字段)显示错误。

浏览 33提问于2020-11-27得票数 1

2回答

如何在react* js中获得动态生成的输入字段的值？*

javascript、reactjs

我刚开始响应Js，在选择count InputCount之后，我已经生成了输入字段dynamically.Now，我想要得到输入字段的值，也想验证所有的字段。import React, { Component } from 'react'; constructor(props) {</div>)

浏览 0提问于2019-02-27得票数 2

回答已采纳

2回答

响应表单验证-回调而不是事件

javascript、reactjs

我试图在react中找到一个表单验证的好例子。通过将事件从父窗体发送到其输入子表，并对每个子窗体调用验证方法，我找到了验证。我还找到了一种方法，通过循环遍历表单子节点，并在字段验证后调用子字段上的setState。class Main extends React.Component

浏览 1提问于2015-07-29得票数 4

回答已采纳

3回答

twitter-bootstrap、validation、reactjs

placeholder="Name" className="form-control"</div> 您好，我正在尝试使用模式验证来验证React中的表单输入字段。我正在使用像pattern="[A-Za-z]{3}"一样简单的验证

浏览 46提问于2017-01-30得票数 8

回答已采纳

1回答

react钩子表单仅在提交时进行验证

react-hook-form

在验证失败后，如何防止react钩子表单继续验证。以下面的例子为例。假设我需要将值发布到后端以进行验证，我不希望它每次添加新值或在输入中粘贴值时都发布。这是我<

浏览 8提问于2022-11-08得票数 1

回答已采纳

1回答

如何选中复选框是否选中了react样式的组件

reactjs、checkbox、styled-components、checked

我正在构建一个带有react样式组件的项目，我需要检查是否选中了复选框。现在我用反应钩(美国)来做这件事。我很想知道是否有一个内建方法返回true或false。

浏览 5提问于2022-02-18得票数 0

1回答

当输入为空时，响应钩子形式验证。与Yup.matches的冲突

react-hook-form、yup

我用的是反应钩表和验证表。字段允许用户提交表单而无需填写此字段，但如果用户填写此字段，则用户只能填充与regex匹配的字符串(我的regex为检查个人名称)。我遇到的问题是，当用户提交表单而没有在文本字段中输入任何值时，react钩子表单一直在验证并显示错误(如果我使用Formik，则不会发生这种情况，但出于性

浏览 7提问于2022-11-05得票数 0

回答已采纳

1回答

如何使注册字段验证只发生在按钮触发器上，而不是在表单提交时？

reactjs、react-hook-form、onsubmit

使用react钩子式V6。假设有一个文本输入“电子邮件”在我的形式。我的表格有两个按钮：ref={register({

浏览 2提问于2022-04-05得票数 0

回答已采纳

1回答

如何将电子邮件验证添加到带有t梳理格式的本地字段中？

javascript、validation、react-native、tcomb、tcomb-form-native

我已经将keyboardType设置为电子邮件地址，使用带有react本机的tcomb表单本机库。如何向表单中添加regex或电子邮件验证程序？或者我可以使用库设置regex验证字段吗？我注意到t梳理验证有一个RegExp类型字段，但我没有看到如何使用它的任何示例。显示的示例似乎测试某个字段是否是regex模式，这是一个令人困惑的用例，因为您通

浏览 2提问于2017-05-01得票数 7

回答已采纳

点击加载更多

如何在规则验证中对输入使用Reacti-钩子表单和material(Mui)？

多输入的表单验证

如何在React中从表单中获取数据

React-hook-form文本字段的条件验证，基于是否选中了另一个复选框？

如何在表单的“外部”反应中验证表单

将无效参数动态添加到Joi验证

React钩子式输入字段匹配验证最佳实践

在组件中添加文本区域的值

未重置的触摸属性

如果输入字段卸载react钩子表单，如何删除验证架构

在Reactive原住民中使用验证构建表单的最合适方法是什么？

使用react钩子表单验证字段数组

如何在react* js中获得动态生成的输入字段的值？*

响应表单验证-回调而不是事件