在本教程中，我们将看看如何使用React和HTML5的现代组合来处理表单提交和验证。

当我们在Web应用程序中讨论用户输入时，我们经常首先想到HTML表单。Web表单从HTML的第一个版本开始就已经可用。显然，该功能已于1991年推出，并在1995年以RFC 1866标准进行了标准化。我们在任何地方都使用它们，几乎每个库和框架。但是React呢？Facebook就如何处理表单提供了有限的意见。主要是为交互事件订阅表单和控件，并通过“value”属性传递状态。因此表单验证和提交逻辑取决于您。体面的用户界面意味着你可以覆盖“on submit”/“on input”字段验证，内联错误消息，根据有效性切换元素，“原始”，“提交”状态等逻辑。我们能不能抽象出这种逻辑并简单地将它插入我们的表格中？我们当然可以。唯一的问题是采取什么方法和解决方案。

DevKit中的表单

如果你喜欢去的devkit ReactBootstrap或AntDesign你很可能已经高兴的形式。两者都提供组件来构建满足不同要求的表单。例如，在AntDesign中，我们使用元素和带有的表单字段来定义表单，该 是集合中任何输入控件的封装。您可以在上设置验证规则，如：

这是一个简单的形式，除了一件事 - 输入元素有一个 required 属性。所以如果我们立即按下提交按钮，表单将不会被发送到服务器。相反，我们会在输入旁边看到一个工具提示，说明该值不符合给定的约束（即该字段不应为空）。

现在我们将输入设置为一个附加约束：

所以这个值不仅仅是必需的，而且必须遵从给定的正则表达式pattern。

错误信息虽然不是那种信息，是吗？我们可以对其进行定制（例如，解释我们对用户的期望）或者只是翻译：

const answer = document.querySelector( "[name=answer]" );

answer.addEventListener( "input", ( event ) => {

if ( answer.validity.patternMismatch ) {

answer.setCustomValidity("Oh, it's not a right answer!");

} else {

answer.setCustomValidity( "" );

}

});

所以基本上，在输入事件中，它检查patternMismatch 输入有效性状态的 属性状态。任何时候实际值与模式不匹配，我们定义错误消息。如果我们 对控件有任何其他限制，我们也可以在事件处理程序中覆盖它们。

对工具提示不满意？是的，他们在不同的浏览器中看起来不一样。我们添加下面的代码：

const answer = document.querySelector( "[name=answer]" ),

answerError = document.querySelector( "[name=answer] + [data-bind=message]" );

answer.addEventListener( "input", ( event ) => {

answerError.innerHTML = answer.validationMessage;

});

即使只是这个超级简短的介绍，你可以看到技术的力量和灵活性。本机表单验证非常好。那么，为什么我们要依靠无数的定制库？为什么不使用内置验证？

React符合表单验证API

react-html5-form将React（以及可选的Redux）连接到HTML5 Form Validation API。它公开组件Form 和 InputGroup （类似于Formsy的自定义输入或 FormItem 在AntDesign中）。因此， Form 定义了表单及其范围，并 定义了可以包含一个或多个输入的字段的范围。我们只是用这些组件包装任意形式的内容（只是简单的HTML或React组件）。在用户事件中，我们可以请求表单验证，并获得更新后的状态 和组件，因此，对底层输入有效性。 InputGroupFormInputGroup

那么，让我们在实践中看到它。首先，我们定义表单范围：

import React from "react";

import { render } from "react-dom";

import { Form, InputGroup } from "Form";

const MyForm = props => (

);

render( <myform>, document.getElementById( "app" ) );

该作用域接收具有属性的状态对象：

• 错误 - 表单错误消息（通常是服务器验证消息）。我们可以设置它 form.setError()。
• valid - 布尔值，指示所有基础输入是否符合指定约束。
• pristine - 布尔值，指示用户是否尚未与表单交互。
• submitting - 表示正在处理表单的布尔值（按下提交按钮时切换为true，并在用户定义的异步onSubmit 处理程序解析后立即返回false ）。
• form - 用于访问API的Form组件的实例。

这里我们使用just pristine 和submitting properties来将提交按钮切换到禁用状态。

为了在提供表单内容时注册输入进行验证，我们将它们包装在一起 InputGroup

{({ error, valid }) => (

)}

通过validate 道具，我们指定了团队的哪些输入应该被注册。[ "email" ] 意味着我们有唯一的输入，名称为“电子邮件”。

在范围中，我们收到具有以下属性的状态对象：

• 错误 - 所有已注册输入的错误消息数组。
• 错误 - 最后发出的错误消息。
• valid - 布尔值，指示所有基础输入是否符合指定约束。
• inputGroup - 访问API的组件实例。

渲染之后，我们得到一个带有电子邮件字段的表单。如果该值为空或在提交时包含无效的电子邮件地址，则会在输入旁边显示相应的验证消息。

请记住，我们在使用本机Form Validation API时正在努力处理自定义错误消息？在以下情况下更容易 InputGroup：

onInput( e, inputGroup, form ) } id="emailInput" />

从现在开始，只要我们改变输入值就会被验证，如果它无效，我们会立即收到错误信息。

你可以从上面的例子中找到演示的源代码。

顺便说一句，你喜欢将组件派生的表单状态树连接到Redux存储吗？我们也可以做到这一点。

该软件包公开了html5form 包含所有注册表单的状态树的reducer 。我们可以像这样将它连接到商店：

import React from "react";

import { render } from "react-dom";

import { createStore, combineReducers } from "redux";

import { Provider } from "react-redux";

import { App } from "./Containers/App.jsx";

import { html5form } from "react-html5-form";

const appReducer = combineReducers({

html5form

});

// Store creation

const store = createStore( appReducer );

render( <provider>

, document.getElementById( "app" ) );

现在，当我们运行应用程序时，我们可以在商店中找到所有与表单相关的状态。

这是一个专用演示的源代码。

概括

React没有内置的表单验证逻辑。但我们可以使用第三方解决方案。所以它可以是一个DevKit，它可以是一个表单生成器，它可以是一个HOC或包装器组件，将表单验证逻辑混合到任意形式的内容中。我个人的方法是一个包装组件，它依赖于HTML内置的表单验证API并在表单和表单域的范围内公开有效性状态。