Redux Form 是一个用于 React 应用程序的强大表单库，它可以帮助开发者轻松地管理表单状态，并提供了一系列常用的表单元素，如文本框、下拉框、单选框等。而在 Redux Form 7.3 版本中，输入验证功能得到了增强，本文将介绍 Redux Form 7.3 的输入验证功能，包括如何自定义验证规则、如何在表单中使用验证规则等。
自定义验证规则
Redux Form 提供了一些常用的验证规则，如 required、email、url 等，但有时候我们需要使用自定义的验证规则，Redux Form 7.3 版本提供了一种自定义验证规则的方式，即使用 redux-form-validators 库。下面是一个示例：
import { combineValidators, isRequired, isEmail } from 'redux-form-validators';
const validate = combineValidators({
firstName: isRequired({ message: '请填写您的名字' }),
email: isEmail({ message: '请填写正确的邮箱地址' }),
});
export default validate;在上面的示例中，我们使用了 combineValidators 方法将两个验证规则 isRequired 和 isEmail 组合成一个验证器 validate，然后将其导出。这样，我们就可以在表单中使用这个验证器了。
在表单中使用验证规则
在 Redux Form 7.3 中，我们可以在表单的 Field 组件中使用验证规则。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ -------- ---- -------------
----- ----------- - -- ------ ------ ----- ----- - -------- ----- - -- -- -
-----
----------------------
-----
------ ---------- ------------------- ----------- --
-------- -- ----- -- ---------------------
------
------
--
----- ----------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
------ ---------------- ----------------------- ----------- ---------- --
------ ------------ ----------------------- ------------ ---------- --
------- -------------------------
-------
--
--
------ ------- -----------
----- ----------
---------
----------------在上面的示例中，我们首先导入了 validate 验证器，然后在 reduxForm 方法中将其传递给表单。接着，在 Field 组件中，我们使用了 name 属性指定了字段名称，使用了 component 属性指定了渲染组件，使用了 type 属性指定了输入类型，使用了 label 属性指定了标签。最后，我们在渲染组件中使用了 meta 属性来获取验证结果，如果验证结果有错误，则渲染一个错误提示。
总结
Redux Form 7.3 版本的输入验证功能得到了增强，我们可以使用自定义验证规则，并在表单中使用验证规则。通过学习本文，我们可以更好地使用 Redux Form 库来管理表单状态，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf8c46add4f0e0ff9199e0