一、客户端同步校验支持
redux-form V.7.4.2提供了两种方法可以为表单提供同步客户端校验支持。
<强>第一种是为整个redux-form提供校验函数强,该函数接受一个以表单中所有值组成的对象作为参数并返回一个带有所有错误信息的对象。具体实现方式也分为两种形式:(1)通过将校验函数作为配置参数提供给经过装饰的表单组件来完成的;(2)作为道具提供给经过装饰的表单组件来完成的。<强> 这也是本文要讨论的校验方案。
<强>第二种是为每个字段使用单独的校验器强。后面文章中我们也会讨论字段级表单验证的示例。
此外,还可以为redux-form提供具有与校验函数相同类型签名的警告函数。警告方式并不是将表单标记为无效的,这在某种意义上允许两种层次严重错误的发生(这个结论只有通过深入分析有关源码才能彻底弄明白,由于时间原因我也没有分析这部分源码,所以在此先略去进一步讨论)。
另外需要提示的是,这里提供的示例校验函数纯粹是为了简化演示目的。在实际的应用程序中,建议构建某种类型的可重用校验系统。
【注意】通常使用可重用的无状态函数组件来渲染每个字段。重要的是,这不是使用内联方式定义的(在渲染函数中),因为在每次渲染时以及触发每一个字段的重新渲染时都要进行校验,因为此时组件道具将发生变化。
几个重要结论
(1)如果校验函数返回错误,并且表单当前由于发生各种错误而没有渲染字段,则表单将被视为有效的并会被提交。
(2)表单数据每次更改时都会进行同步校验,因此,如果你的字段值无效,则将始终存在一个field.error值。一旦你的字段被修改了,你可能只想显示校验错误——这种情况下当你的字段上发生onBlur事件时redux-form会为设置一个专门的标记,最终,当提交表单时,所有字段都标记为已触摸(也就是已修改,一些特殊情况下,例如系统已经内置提供了某种数据,如果你点击一下对应字段,说明”已触摸”,这种情况也算是“已修改”的特殊情形),从而允许显示任何校验错误。
(3)在你的校验函数中,值可能未定义,因此在验证嵌套字段时请特别注意。如果没有注意这个问题,那么你可能会遇到一些“TypeError:定义”这样的错误提示。
本文将简要讨论redux-form支持下的同步表单校验支持,包括了错误和警告型配置。官方演示中只演示了输入框的校验,而这里准备了包括无线电selecttextarea的校验方式。~ ~
官方示例分析
官方示例的核心文件是redux-form-synchronous-validation.js,其中文件与绝大部分的其他实例保持一致,在此不作赘述。
运行时快照
注意到,上图中在尚未点按提交按钮的情况下,无论是输入了不合格式要求的邮箱数据,还是输入不在指定范围内的年龄数据,校验子系统都给出相应的错误提示信息。从源码跟踪分析来看,redux-form这个库的核心是一个不到900行代码的名为createReduxForm.js的文件上。图中错误信息都是由React.js系统完成的。也就是说,redux-form只提供校验,错误,警告等数据部分(包括判断函数)的抓取分析,最终的可能的错误提示是交由反应系统(通过createElement方法)完成的。
代码分析
在此,我们只关注与表单整体校验有关的部分。下面还是先来看一下实例代码(SyncValidationForm.js,仅直接相关部分):
<代码> const验证=值=比;{
const错误={}
如果(! values.username) {
错误。用户名=枰?
如果(values.username}其他。长度比;15){
错误。用户名='必须小于15个字符'
}
如果(! values.email) {
错误。电子邮件=枰?
}else if (!/^ [a - z0 - 9. - _ % + -) + @ (- z0 - 9.) + \ [a - z]{2,4} $/信息技术(values.email)) {
错误。电子邮件=拔扌У牡缱佑始刂贰?
}
如果(! values.age) {
错误。年龄=枰?
}else if (isNaN(数量(values.age))) {
错误。年龄='必须很多'
}else if(数量(values.age) & lt;18){
错误。年龄='对不起,你必须至少18岁的
}
返回错误
}
const警告=值=比;{
const警告={}
如果值。年龄& lt;19){
警告。年龄=班?你似乎有点年轻…”
}
返回警告
}
const SyncValidationForm=(道具)=比;{//?
}
出口默认reduxForm ({
形式:' syncValidation ',//这种形式的惟一标识符
验证//& lt;给redux-form——验证函数
警告//& lt;给redux-form——警告功能
})(SyncValidationForm) redux-form V.7.4.2学习笔记(六)表单同步校验技术
