一、前言
在前端开发过程中，表单是非常常见的页面元素，同时也是开发中需要耗费时间和精力的部分。为了提高开发效率和减少工作量，我们可以使用 jganz-formsy-react 这个 npm 包。
jganz-formsy-react 是一个 React 表单验证组件库，支持多种验证规则，以及可扩展自定义规则，并且支持异步验证及自动获取表单值。
本篇文章将详细讲解 jganz-formsy-react 的使用方法，帮助读者快速了解该组件库并加以实践。
二、安装
安装 jganz-formsy-react，可以使用 npm：
npm install jganz-formsy-react --save
三、使用 jganz-formsy-react
1. 引入组件
import Formsy, { RequiredStringValidator } from "jganz-formsy-react";2. 使用 Formsy 组件包裹表单
<Formsy onSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
// 表单元素
</Formsy>其中，onSubmit、onValid、onInvalid 是事件回调函数。onSubmit 处理表单提交，onValid 和 onInvalid 分别在表单验证通过和不通过时触发，用于表单按钮的启用和禁用等操作。
3. 表单元素
Formsy 组件包裹的表单元素支持常见的表单元素，如文本框、单选框、复选框、下拉框等，以及自定义表单元素。在表单元素中，可以使用 jganz-formsy-react 提供的验证器组件来添加验证规则。
以文本框为例：
<Formsy onSubmit={this.submit}>
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} validations={{ minLength: 5 }} validationErrors={{ minLength: '太短了' }} required />
// 确认按钮
</Formsy>input 元素中，name 属性对应表单数据模型中的字段，value 绑定表单数据模型中的值，onChange 用于更新表单数据模型的值。
validations 和 validationErrors 分别用于添加验证规则和对应的错误提示，required 则表示必填字段。
在上述例子中，使用 minLength 验证器组件添加验证规则为最小长度，当输入长度小于 5 时，将显示错误提示“太短了”。
4. 自定义表单元素
jganz-formsy-react 支持开发者自定义表单元素，只需要实现表单元素的验证和值更新即可。以自定义文本框为例：
-- -------------------- ---- -------
----- ----------- ------- --------- -
------------------ -
-------------
---------------- - ----------------------------
-
------------------ -
-----------------------------------------------
-
-------- -
------ -
------ ----------- ---------------------- ----------------------------- --------------------------- --
--
-
-
--------------------- - -
--------- --------------------------
--------- --------------------------
----- ---------------------------
--
-- --------
------- -----------------------
------------ ----------- --
-- ----
---------在 CustomInput 组件中，setValue 和 getValue 分别用于更新表单数据模型的值和获取表单数据模型的值。
在表单元素定义中，name 属性和 validations 等组合使用。
5. 异步验证
jganz-formsy-react 支持使用异步验证器实现异步验证，例如：
-- -------------------- ---- -------
----- -------------- ------- --------- -
------------------ -
-------------
------------------ - ------------------------------
---------- - -
---------- ------
-------- -----
--
-
--------------------- -
-- -- ---- ---------
--------------- ---------- ---- ---
------ --- ----------------- -- -
---------------- -
------- -
----- -----------
-
------------------ -- -
-- -------------- --- ---------- -
--------------- -------- ---- ---
----------
- ---- -
--------------- -------- ----- ---
--------- ----- ----- ---
-
----------- -- -
--------------- -------- ----- ---
--------- ----- ------ ---
------------- -- -
--------------- ---------- ----- ---
---
---
-
-------- -
----- - ---------- ------- - - -----------
----- - ----- ------ --------------- - - -----------
------ -
-----
------ ----------- ----------- ------------- ------------------------------ ---------------------------- --
-
---------
- ---------
- -------
- --
- ------------------------------
-
------
--
-
-
------------------------ - -
----- ----------------------------
------ ----------------------------
--------- --------------------------
--------- --------------------------
---------------- -------------------------
--
-- -------
------- -----------------------
--------------- ----------- -------------- -------- ---- -- ------------------- -------- ----- -- -------- --
-- ----
---------异步验证器组件实现在组件中添加了 asyncValidate 方法，并在 onChange 事件中手动执行 validate 方法。
在表单元素定义中，validations 属性中的 isExist 新增自定义的异步验证器。
四、配置 Formsy
jganz-formsy-react 的配置项包括：
- disabled
- errorMessages
- forceValidation
- getErrorMessage
- getValue
- isValid
- isFormDisabled
- isFormSubmitted
- isPristine
- isRequired
- isSubmitting
- isValidValue
- resetValue
- setValue
- showError
- showRequired
- submit
使用配置项，例如：
-- -------------------- ---- ------- ------- ------------------------------ ---------------------------------------- -------------------------------------------- -------------------------------------- ------------------------ ---------------------- ----------------------------------------- -------------------------------------- ---------------------------- ---------------------------------- ------------------------------------ -------------------------------- -------------------------- -------------------------------- -------------------- - -- ------ ---------
五、总结
jganz-formsy-react 是一个强大且易用的表单验证 React 组件库。通过本文的学习，读者可以快速掌握 jganz-formsy-react 的基本用法，并在实际项目中应用该组件库，提高开发效率和优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f081e8991b448d3d3b