react-field-validator 是一个基于 React 的表单验证库，可以帮助开发者更好地进行表单验证。本篇文章将介绍 react-field-validator 的使用方法并提供一些示例代码。
安装
使用 npm 进行安装：
npm install react-field-validator
基本用法
通过引入 react-field-validator，可以将需要验证的表单数据包装成一个特定的 React 组件。以下是一个基本示例：
-- -------------------- ---- -------
------ - ------ ---- - ---- ------------------------
------ ------- -------- ----------- -------- -- -
----- ------------ - ------ -- -
---------------
--
------ -
----- ------------------------
------ --------------- ---------
-------- -- -
--
------ ------------------------------------
------ ----------- ---------- --
-------------- -- ----------- -- -------------------------
---
--
--------
------ --------------- -------- --------------
-------- -- -
--
------ ------------------------------------
------ --------------- ---------- --
-------------- -- ----------- -- -------------------------
---
--
--------
------- ----------------------------
-------
--
-上述代码中，我们创建了一个表单组件 LoginForm，并通过 Form 和 Field 包裹需要验证的表单数据，并在表单提交时调用 onSubmit 方法。
Field 组件的 name 属性指定了该表单项对应的键名。此外，我们在 Field 组件中使用了一个渲染函数来呈现表单。该函数的参数包括表单元素的 props，如 id、value、onChange 等等。通过 {...props} 将这些 props 注入到表单元素中即可完成表单绑定。
同时，我们在渲染函数中使用了 props.touched 和 props.error 两个属性。当表单元素失去焦点时， props.touched 会变成 true，这时候 props.error 会呈现对应的错误信息（如果有）。
验证方法
react-field-validator 内置了一些常用的验证方法，包括 required、minLength、maxLength、email、matches 等等。可以通过在 Field 组件上设置相应的属性来使用这些验证方法。例如：
-- -------------------- ---- -------
------ ------------ -------- ------
-------- -- -
--
------ ---------------------------------
------ ------------ ---------- --
-------------- -- ----------- -- -------------------------
---
--
--------
------ --------------- -------- --------------
--- -- ---
--------
------ ---------------------- -------- -------------------
--- -- ---
--------
---上述代码中，我们在 email 和 minLength 前都设置了 required 属性，表示该表单项为必填项。值得一提的是，我们在确认密码的表单项上使用了 matches 属性，为这个表单项设置了规则，即该表单项的值必须与前面的密码表单项的值相同。
自定义验证方法
除了使用内置的验证方法，我们还可以编写自己的验证方法。以下是一个简单的自定义验证方法示例：
-- -------------------- ---- -------
------ - ------ ----- --------- - ---- ------------------------
------------------------------------ ------- -- -
-- ------ - - --- -- -
------ ---------
-
---
------ ------------- -------- -----------
--- -- ---
--------在这个示例中，我们调用 Validator.addValidator 方法添加了一个名为 evenNumber 的自定义验证方法。该方法接收一个参数 value，即该表单项的值，如果该值不是偶数，该方法将返回一个错误信息。
我们在使用该自定义验证方法时，在 Field 组件上设置了 evenNumber 属性。这样我们在渲染函数中依旧可以使用 props.error 来显示错误信息。
总结
上述是关于 react-field-validator 的使用方法的一些介绍。通过 react-field-validator，我们可以很方便地进行表单验证，并且可以轻松地扩展自己的验证方法。希望这篇文章对你能有一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672281e8991b448e394b