ant-design Form 前后日期相互验证 中,怎么交叉验证

表单有个起始日期和结束日期,要求有前后关系,怎么样才能交叉验证。
我遇到的问题是:
step1: 先设置开始日期为3/23
step2: 设置结束如期为3/21,结束日期组件验证提示“不能晚于开始日期,bulabula”
step3: 再次设置开始时间未3/20, 结束日期的组件还是提示 “不能晚于开始日期,bulabula”
理想的,在step3的时候设置了开始时间,那么结束日期也要再次验证。

我考虑的第一个想法:

1. 在开始日期的validator中触发‘结束日期的validator'。 但是不知道怎么调用,直接调用this.toDateSelect(null, toMoment, callback) 发现根本不触发。

还请大神们指正,谢谢!

我的代码如下:

render 部分

<Col span={6}>
                  <FormItem
                    {...formItemLayout}
                    label="费用期间"
                    >
                    {getFieldDecorator('costDateFrom', {
                      initialValue: null,
                      rules: [
                        { required: true, message: '请输入费用期间开始' },
                        { validator: this.fromDateSelect},
                      ]
                    })(
                      <DatePicker disabled={disabledEdit} format="YYYY-MM-DD" />
                    )}
                  </FormItem>
                </Col>
                <Col span={6}>
                  <FormItem
                    {...formItemLayout}
                    label="到"
                    >
                    {getFieldDecorator('costDateTo', {
                      initialValue: null,
                      rules: [
                        { required: true, message: '请输入费用期间结束' },
                        { validator: this.toDateSelect},
                      ]
                    })(
                      <DatePicker disabled={disabledEdit} format="YYYY-MM-DD" />
                    )}
                  </FormItem>
                </Col>

验证函数

fromDateSelect(rule, fromMoment, callback) {
    const { getFieldValue } = this.props.form;
    const toMoment = getFieldValue('costDateTo');
    // 结束如期必须必起始日期大
    if (!toMoment || !fromMoment) {
      return callback()
    }

    if (toMoment.isBefore(fromMoment, 'day')) {
      return callback('开始时间不能在结束日期之后')
    }

    try{
      this.toDateSelect(null, toMoment, callback)
    } catch(e) {
      console.log(e)
    }

    return callback()
  }
  toDateSelect(rule, toMoment, callback) {
    const { getFieldValue } = this.props.form;
    const fromMoment = getFieldValue('costDateFrom');
    // 结束如期必须必起始日期大
    if (!toMoment || !fromMoment) {
      return callback()
    }

    if (toMoment.isBefore(fromMoment, 'day')) {
      return callback('结束日期不能在开始日期之前')
    }
    return callback()
  }
阅读 4.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题