redux-form V.7.4.2学习笔记(六)表单同步校验技术

一、简介

redux-form V.7.4.2提供了两种方法可以为表单提供同步客户端校验支持。

第一种是为整个redux-form提供校验函数,该函数接受一个以表单中所有值组成的对象作为参数并返回一个带有所有错误信息的对象。具体实现方式也分为两种形式:或者是通过将校验函数作为配置参数提供给经过装饰的表单组件来完成的;或者作为props提供给经过装饰的表单组件来完成的。

第二种是为每个字段使用单独的验证器。后面文章中我们也会讨论字段级表单验证的示例。

此外,您可以为redux-form提供具有与验证函数相同类型签名的警告函数。警告是不将表单标记为无效的错误,允许两层严重性的错误。

示例验证功能纯粹是为了简化演示值。在您的应用程序中,您将需要构建某种类型的可重用验证器系统。

注意用于渲染每个字段的重用无状态函数组件。重要的是,这不是内联定义的(在render()函数中),因为它将在每个渲染上重新创建并触发该字段的重新渲染,因为组件prop将发生变化。

重要信息:如果验证函数返回错误,并且表单当前没有呈现所有错误的字段,则表单将被视为有效并将被提交。

重要信息:对表单数据的每次更改都会进行同步验证,因此,如果您的字段值无效,则field.error值将始终存在。您可能只想在触摸字段后显示验证错误,这是在您的字段上发生onBlur事件时由redux-form为您设置的标记。提交表单时,所有字段都标记为已触摸,允许显示任何验证错误。

重要信息:在验证函数中,值可能未定义,因此在验证嵌套字段时请注意。如果没有,您可能会遇到一些TypeError:undefined不是对象。
本文将简要讨论redux-form支持下的同步表单校验支持,包括了错误和警告型配置。官方Demo中只演示了输入框的验证,而这里准备了包括 radio selecttextarea 的验证方式。

参考

(1)https://github.com/tedyuen/react-redux-form-v6-example#snycValidation
(2)https://redux-form.com/7.4.2/examples/syncvalidation/

(暂时保存,稍后待续......)

猜你喜欢

转载自blog.51cto.com/zhuxianzhong/2149844