引言
Redux-Form是一个针对React Redux项目的表单库，支持所有表单类型，并且基于Redux设计。Redux-Form的validator是一个负责表单输入合法判断和提示的工具。但是，对于一些复杂表单而言，它的validator会变得不够灵活和强大。redux-form-create-validator是一个基于Redux-Form的validator增强工具，通过自定义校验规则，实现表单验证的高度定制化和可配置化。本文将介绍如何使用这个npm包。
安装
使用npm进行安装：
npm install redux-form-create-validator
基础用法
先看一下使用redux-form-create-validator的基础用法。首先，我们需要在redux-form中引入它，并定义一些自定义验证规则：
-- -------------------- ---- -------
------ --------------- ---- ------------------------------
----- -------- - -----------------
----- -
--------- -----
-------- --------
--
---- -
--------- -----
-------- ---------
------- -
-------- ---------
-
-
---然后，在表单组件中使用这个validator：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ --------- - ---- -------------
------ -------- ---- ---------------- -- ---------------
----- ------ ------- --------- -
-------- -
----- - ------------ - - -----------
------ -
----- ------------------------
-----
-----------------
------ ----------- ----------------- -------------
------
-----
-----------------
------ ---------- ----------------- -------------
------
------- -------------------------
-------
--
-
-
------ - -----------
----- ---------
-------- -- -----------
-----------
------ ------- -------这样，表单中的输入就经过我们定制的验证规则进行了检验。
表单验证
在上面的基础用法中，我们没有将验证结果反馈给用户。接下来，我们对表单的验证结果进行处理。为了简便，这里我们只展示验证失败的情况。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ --------- - ---- -------------
------ -------- ---- ---------------- -- ---------------
----- ------ ------- --------- -
-------- -
----- - ------------- ----------- -------- ------ - - -----------
------ -
----- ------------------------
-----
-----------------
------ ----------- ----------------- -------------
------------ -- ---------------------------
------
-----
-----------------
------ ---------- ----------------- -------------
----------- -- --------------------------
------
------- ------------- -------------------- -- --------------------
-------
-
-
-
------ - -----------
----- ---------
-------- -- -----------
-----------
------ ------- -------在这个例子中，我们使用errors属性将验证失败的信息反馈给表单使用者。这可以帮助我们在表单中直接呈现错误，增加用户体验。
高级用法
在实现高级验证时，我们需要用到额外的验证规则和自定义表单元素。我们在项目中使用到的一个高级验证需求：五个checkbox至少选择一项。这里，我们要用到自定义表单元素和额外的验证规则。
首先，定义我们的自定义表单元素：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------------- ------- --------- -
------------ - - -- -
----- - ----- - - -----------
----- -------- - -----------------
-- ------------------ -
------------------------------
- ---- -
----- ----- - ---------------------------------
---------------------- ---
-
-------------------------
--
-------- -
----- - -------- ----- - - -----------
------ -------------- ------ ----- -- -- -
------ ------------
------
---------------
-------------
----------------------------------- --- ---
----------------------------
--
-------
--------
--
-
-
------ ------- --------------我们需要在自定义组件中进行一些和redux-form相关的属性和方法绑定。这里，我们使用input属性传递了表单元素的值，并通过onChange方法更新表单值。其他属性和方法的含义，可以在doc中查找。
然后，定义自定义规则：
-- -------------------- ---- -------
------ --------------- ---- ------------------------------
----- -------- - -----------------
----- -
--------- -----
-------- --------
--
---- -
--------- -----
-------- ---------
------- -
-------- ---------
-
--
-------- -
-------------- - -- -------
---- --
-------- ----------
-
-
-- -
-------------- -- ---- ------- -- -- ------- -- ------------- -- --- - --------- - ---------
---这里，我们定义了一个名为checkboxGroup的验证规则，它用于验证五个checkbox中至少选择一项的情况。我们用自定义函数实现了这个验证规则。
最后，我们在表单组件中使用自定义的表单元素和自定义的验证规则：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ --------- - ---- -------------
------ -------- ---- ---------------- -- ---------------
------ ------------- ---- ------------------------------ -- ----------
----- ------- - -
- ------ ------- ------ ---------------- --
- ------ ------ ------ -------------- --
- ------ ------- ------ --------------- --
- ------ ----- ------ ---------- --
- ------ ----- ------ ------------ -
--
----- ------ ------- --------- -
-------- -
----- - ------------- ----------- -------- ------ - - -----------
------ -
----- ------------------------
-----
-----------------
------ ----------- ----------------- -------------
------------ -- ---------------------------
------
-----
-----------------
------ ---------- ----------------- -------------
----------- -- --------------------------
------
-----
-----------------
------
--------------
------------------------- -- ----------
-----------------
--
--------------- -- ------------------------------
------
------- ------------- -------------------- -- --------------------
-------
-
-
-
------ - -----------
----- ---------
-------- -- -----------
-----------
------ ------- -------这里，我们引入了自定义的表单组件，并在表单组件中使用了它。并引入了自定义的验证规则，也在表单组件中使用了它。达到了实现复杂表单验证的目的。
总结
redux-form-create-validator是一个基于Redux-Form的validator增强工具，通过自定义校验规则，实现表单验证的高度定制化和可配置化。本文详细介绍了如何使用这个npm包，包括基础用法、表单验证和高级用法。通过本文的学习，你可以更好地理解和应用redux-form-create-validator，并改进你的表单验证流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d12