Ant Design的RangePicker组件实现必填校验

 

需求

在前端页面开发中，对输入参数进行必填校验是很普遍的需求。项目组使用的前端开发架构为基于React的Ant Design Pro，设置前端组件的校验规则通常为框架自带的required: true即可，如下：

<Form.Item {...formItemLayout} label="名称" key={'name'}>
                {getFieldDecorator('name', {
                  initialValue: data.name,
                  rules: [
                    {
                      required: true,
                      message: '请输入升级名称',
                    },
                  ],
                })(<Input placeholder="请输入名称" disabled={isView} />)}
              </Form.Item>

现象

然而，使用RangePicker组件的时候，仅仅使用required这条必填校验规则就会出现下面两种情况：

情况1：不点击RangePicker组件进行选择日期，直接提交表单，表单不会提示RangePicker组件的内容没有填，即校验不生效。

情况2：点击RangePicker组件进行选择日期，然后又清空日期，再点击表单提交，表单提示RangePicker组件的内容没有填，即校验生效。

解决

上述现象表名required校验规则能对RangePicker组件起作用，只是不能完全满足需求。

研究和调试发现，在受控于Form组件的表单项中，RangePicker的值是一个带有2个Moment类型元素的数组，不选择日期的时候两个元素为undefined，此为情况1；选择日期然后又清空后，数组被清空，长度变为0，此为情况2。由于required: true只校验情况2，所以要自定义校验规则才能满足RangePicker组件的校验需求。

自定义如下校验规则即可实现RangePicker组件的必填校验。

<Form.Item {...formItemLayout} label="升级时间" key={'updateTime'}>
                {getFieldDecorator('updateTime', {
                  initialValue: [data.updateStartTime ? moment(data.updateStartTime, 'YYYY-MM-DD HH:mm:ss') : null,
                    data.updateEndTime ? moment(data.updateEndTime, 'YYYY-MM-DD HH:mm:ss') : null],
                  rules: [
                    {
                      required: true,
                      message: '请选择升级时间',
                    },
                    {
                      // 自定义校验规则
                      validator: (rule, value, callback) => {
                        if (value.length === 2) {
                          if (!value[0] || !value[1]) {
                            callback('请选择升级时间')
                          } else {
                            // callback不传参数表示校验通过
                            callback()
                          }

                        } else {
                          callback('请选择升级时间')
                        }
                      }
                    }
                  ],
                })(<RangePicker showTime={true} style={{width: '100%'}} disabled={isView}/>)}
              </Form.Item>

注意，在自定义规则上面仍然使用required校验规则，是为了显示表单项前面的必填标记。