表单验证 react
总览
处理表单是Web应用程序极为常见的用例。 在本文中,让我们探索使用React而不使用第三方库来处理表单输入和验证的方法。
要求
我们将介绍适用于大多数用例的最受欢迎的功能:
- 使用表单的组件的
onSubmit
回调。 - 验证单个输入(仅前端)。
- 验证
onSubmit
而不是onBlur
。 - 重置表格。
它是如何工作的?
我们将创建一个Form上下文,该上下文将保存所有状态并为所有Form输入定义所有状态交互。
装入输入时,在这些输入中传递的某些信息将用于提供给Form上下文。
当表单上下文中的输入更改时,它将向表单上下文提交其新值。 表单上下文接收值并将其状态更改为新值,并将其向下传递到输入(受控输入)。
提交表单后,它将运行输入装入时注册的所有验证,并为特定字段设置错误。 然后,这些将被向下传递到正确的输入并进行相应渲染。
下图总结了每种类型的组件的职责。
实作
表格状态
该表格状态需要能够容纳3条信息:
- 表单数据-用于用户的输入数据。
- 验证-用于特定领域的验证。
- 错误-特定于字段的错误。
我认为该对象应该足够使用。
const FORM_STATE = {
data : {},
validators : {},
errors : {},
};
我们还将约定,每个输入必须具有唯一的名称prop来标识自己。 这类似于常规HTML5表单<input>
具有name属性的方式。
名称的唯一性很重要,因为我们将在状态结构中将它们用作键。
例如,名称为first_name
的输入将存储在FORM_STATE
,如下所示:
{
data : {
first_name : "John" ,
},
validators : {
first_name : [fn()],
},
errors : {
first_name : [ "error message" ],
}
}
表单上下文
要将表单状态和方法注入到每个想要订阅的组件中,我们将使用上下文提供者模式。 您可以在此处阅读有关上下文的更多信息。
在我的理解中,上下文是一个包装器,它将道具注入到通过消费者订阅的任何子组件中。 有一种使用useContext
钩子订阅上下文的便捷方法。
我们还将创建一个HOC,将上下文订阅逻辑封装在一个地方,以便我们的输入尽可能是纯UI。 换句话说,输入是表示性组件,只会听取道具更改。 表单上下文是包含大多数逻辑的容器。
表格方法
让我们逐步了解表单上下文的行为。
注册
装入输入时,应在表单上下文中注册自己。 在注册时,我们只需从输入中复制验证器,以将其存储在表单上下文中。
卸载输入时,我们应清除其验证,错误以及与该输入关联的所有数据。 这是注册功能。
const registerInput = ( { name, validators } ) => {
setFormState( state => {
return {
...state,
validator