redux-form-validation-with-fieldarray 是一个基于 Redux 和 React 的前端库，可以用于在处理表单时对表单数据进行验证功能。同时，它还支持 FieldArray，可以用于在表单中处理重复字段。
本文将带你详细了解npm 包 redux-form-validation-with-fieldarray的使用方法。
安装
npm install redux-form-validation-with-fieldarray
基本使用
引入
import { Form, Field } from 'redux-form-validation-with-fieldarray';编写表单组件
-- -------------------- ---- -------
----- ------ - ----- -- -
----- ------------------------------
------ --------------- ----------------- ----------- --
------ --------------- ----------------- --------------- --
----------- ------------- ------------------------ --
------- -------------------------
-------
--
----- ------------ - -- ------ -- -- -
-----
------------------- ------ -- -
---- ------------
------
-----------------------
-----------------------
------------- -------- - ----
--
------- ------------- ----------- -- -----------------------------------
------
---
------- ------------- ----------- -- ------------------------------
------
--
----- ----------- - -- ------ ----- -- -- -
-----
----------------------
------ ---------- ----------- --
------
--编写验证逻辑
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - --
-- ------------------ -
--------------- - --------
- ---- -- ----------------------- - -- -
--------------- - ------------
-
-- ------------------ -
--------------- - -------
- ---- -- ----------------------- - -- -
--------------- - -----------
-
----- ----------------- - ---
------------- -- ----------------------------- ------ -- -
----- ----------- - ---
-- ------- -- ------------- -
----------------- - --------------
------------------------ - ------------
-
---
-- -------------------------- -
------------- - ------------------
-
------ ------
--使用表单组件
import { reduxForm } from 'redux-form-validation-with-fieldarray';
const myForm = reduxForm({
form: 'myForm',
validate,
})(MyForm);示例代码
以下代码示例是一个完整的带有验证功能和FieldArray的表格。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- ---------- - ---- ----------------------------------------
----- ------ - ----- -- -
----- ------------------------------
---------------
------ --------------- ----------------------- ----------- ----------- --
------ --------------- ----------------------- --------------- ---------- --
---------------
----------- ------------- ------------------------ --
------- -------------------------
-------
--
----- ----------- - -- ------ ------ ----- ----- - -------- ----- - -- -- -
-----
----------------------
-----
------ ---------- ----------- ------------------- --
-------- -- ----- -- ---------------------
------
------
--
----- ------------ - -- ------- ----- - -------- ----- - -- -- -
-----
------------------- ------ -- -
----- ----------- - ----- -- ------------ -- ---
------ -
---- ------------
------------ ------- - ----------
-----
------
-----------------------
------------
-----------------------
------------- -------- - ----
--
------
-----
------- ------------- ----------- -- -----------------------------------
------
------
--
---
-----
------- ------------- ----------- -- ------------------------------
------
-------- -- ----- -- ----------------------------
------
--
----- -------- - ------ -- -
----- ------ - ---
----- ------ - ------------- -- ---
-- ------------------ -
--------------- - ---------
- ---- -- ----------------------- - -- -
--------------- - -------------
-
-- ------------------ -
--------------- - --------
- ---- -- ----------------------- - -- -
--------------- - ------------
-
----- ----------------- - ---
---------------------- ------ -- -
----- ----------- - ---
-- ------- -- ------------- -
----------------- - --------------
------------------------ - ------------
-
---
-- -------------------------- -
------------- - ------------------
------------- - ----------
-
------ -------
--
------ ------- -----------
----- ---------
---------
-----------结论
本文介绍了如何使用 redux-form-validation-with-fieldarray npm 包，配合 React 和 Redux 来实现前端表格验证功能。读者可以借助 npm 包提高表单验证的开发效率，也可以根据自己的需求来编写自定义的表单验证逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e0757